JavaScript 手写代码第二期

素颜马尾好姑娘i 2024-03-16 22:04 89阅读 0赞

#### 文章目录 ####

*  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 实现思路 ####

1.  判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用call方法等方式调用的情况
2.  判断传入上下文对象是否存在，如果不存在，则设置为window
3.  将函数作为上下文对象的一个属性
4.  判断参数值是否传入
5.  使用上下文对象来调用这个方法，并保存返回结果
6.  删除刚才新增的属性
7.  返回结果

#### 2.2.3 手写实现 ####

**手写实现call方法**

![在这里插入图片描述][84d97dac6d0447e88d498f1027a1bcb2.png]  
**正常来说应该输出 ‘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方法实现思路稍有不同

1.  判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用call等方式调用的情况，
2.  保存当前函数的引用，获取其余传入参数值
3.  创建一个函数返回
4.  函数内部使用 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));
                    };
                };

[84d97dac6d0447e88d498f1027a1bcb2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/aaca94bb177f4288b4262a76cb7a431b.png