文章目录
- 1.为什么要手写代码？
- 2. 手写代码
- 2.1 手写实现判断类型函数
- 2.1.1 前置知识
- 2.1.1 手写实现
- 2.2 手写实现aplly,call,bind方法
- 2.2.1 基本使用
- 2.2.2 实现思路
- 2.2.3 手写实现
1.为什么要手写代码？
我们在日常开发过程中，往往都是取出来直接用，从来不思考代码的底层实现逻辑，但当我开始研究一些底层的东西的时候，才开始理解了JavaScript每个方法和函数的底层实现思路，我认为这可以很好的提高我们的代码水平和逻辑思维。
2. 手写代码
2.1 手写实现判断类型函数
2.1.1 前置知识
let arr = [1, 2, 3];
let obj = {
name: 'zs',
age: 19,
};
console.log(typeof null); // object
console.log(typeof arr); // object
console.log(typeof obj); // object
因此我们可以知道，当使用 typeof 判断数据类型的时候，无论是判断 null,Array,Object都会输出对象object 类型,所以就无法利用 typeof 方法判断他们的数据类型，所以我们就必须使用其他的方法解决这一个问题，Object.prototype.toString() 方法
Object.prototype.toString()方法介绍
每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，toString() 方法被每个 Object对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 “[object type]”，其中 type 是对象的类型。
Object.prototype.toString()方法的简单使用
console.log(Object.prototype.toString.call(obj)); // [object Object]
console.log(Object.prototype.toString.call(arr)); // [object Array]
console.log(Object.prototype.toString.call(null)); // [object Null]
可以看出来数组里面的后面就是 我们想要的数据类型,可以利用正则或者splice方法进行截取
2.1.1 手写实现
function getType(obj) {
let type = typeof obj;
if (type !== 'object') {
// 先进行typeof判断，如果是基础数据类型，直接返回
return type;
}
// 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
2.2 手写实现aplly,call,bind方法
2.2.1 基本使用
1.apply 方法
apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入,改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次
1.call 方法
call方法的第一个参数也是this的指向，后面传入的是一个参数列表,跟apply一样，改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次
1.bind 方法
bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入,改变this指向后不会立即执行，而是返回一个永久改变this指向的函数
2.2.2 实现思路
- 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用call方法等方式调用的情况
- 判断传入上下文对象是否存在，如果不存在，则设置为window
- 将函数作为上下文对象的一个属性
- 判断参数值是否传入
- 使用上下文对象来调用这个方法，并保存返回结果
- 删除刚才新增的属性
- 返回结果
2.2.3 手写实现
手写实现call方法
let name = 'zs';
let obj = {
name: 'lisi',
};
function getName(a, b, c) {
console.log(this.name);
console.log(a, b, c);
}
Function.prototype.myCall = function (context) {
// 这里的this就是调用的方法
if (typeof this !== 'function') {
throw new Error('type error');
}
context = context || window;
// 截取参数
let args = [...arguments].slice(1);
// 在obj对象里面新增调用方法
context.fn = this;
// 调用obj里面的方法fn
let result = context.fn(...args);
// 删除obj里面新增的方法
delete context.fn;
return result;
};
getName.myCall(obj, 1, 2, 3);
正常来说应该输出 ‘zs’ 说明我们通过我们手写的apply方法改变了getName的this指向
手写实现apply方法
只是传递参数的是必须是数组
Function.prototype.myApply = function (context) {
// 这里的this就是调用的方法
if (typeof this !== 'function') {
throw new Error('type error');
}
context = context || window;
// 截取参数
let args = [...arguments].slice(1);
// 在obj对象里面新增调用方法
context.fn = this;
// 调用obj里面的方法fn
let result = context.fn(args);
// 删除obj里面新增的方法
delete context.fn;
return result;
};
getName.myApply(obj, 1, 2, 3);
手写实现bind方法
bind方法实现思路稍有不同
- 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用call等方式调用的情况，
- 保存当前函数的引用，获取其余传入参数值
- 创建一个函数返回
- 函数内部使用 apply 来绑定函数调用，需要判断作为构造函数的情况，这个时候需要传入当前函数的 this 给 apply 调用，其余情况都传入指定的上下文对象
实现代码
Function.prototype.myBind = function (context) {
// 判断调用对象是否为函数
if (typeof this !== 'function') {
throw new TypeError('Error');
}
// 获取参数
const args = [...arguments].slice(1),
fn = this;
return function Fn() {
// 根据调用方式，传入不同绑定值
return fn.apply(this instanceof Fn ? new fn(...arguments) : context, args.concat(...arguments));
};
};
