JavaScript 手写代码第一期

超、凢脫俗 2024-03-16 22:03 132阅读 0赞

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

*  1.为什么要手写代码？
 *  2.手写代码
 *   *  2.1 手写Object.create()方法
     *   *  2.1.1 基本使用
         *  2.1.2 使用实例
         *  2.1.3 手写实现
     *  2.2 手写实现instanceof方法
     *   *  2.2.1 基本使用
         *  2.2.2 使用实例
         *  2.2.3 手写实现
     *  2.3 手写实现new操作符
     *   *  2.3.1 基本使用
         *  2.3.2 使用实例
         *  2.3.3 手写实现

## 1.为什么要手写代码？ ##

我们在日常开发过程中，往往都是取出来直接用，从来不思考代码的底层实现逻辑，但当我开始研究一些底层的东西的时候，才开始理解了JavaScript每个方法和函数的底层实现思路，我认为这可以很好的提高我们的代码水平和逻辑思维。

## 2.手写代码 ##

### 2.1 手写Object.create()方法 ###

#### 2.1.1 基本使用 ####

**定义**: 静态方法以一个现有对象作为原型，创建一个新对象。  
**语法**

Object.create(proto[, propertiesObject])

第一个参数 **proto** 表示新创建对象的原型对象。  
第二个参数 **propertiesObject** 可选。如果没有指定为 undefined，则是要添加到新创建对象的可枚举属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应 Object.defineProperties()的第二个参数。

**返回值:** 在指定原型对象上添加新属性后的对象。  
**注意:** 如果proto参数不是 null 或一个对象，则抛出一个 TypeError 异常。

#### 2.1.2 使用实例 ####

通过 **Object,create()** 方法创建了新对象 newObj 并且将新对象newObj的原型对象指向了obj对象，相当于是 **newObj.proto == obj** 并在第二个参数里面，添加了自己的属性。

//Object.create方法
                let obj = {
        
                    name: 'zs',
                    age: 19,
                };
    
                let newObj = Object.create(obj, {
        
                    hobby: {
        
                        // 初始化值
                        value: true,
                        // 是否可修改
                        writable: true,
                        // 是否能被删除
                        configurable: true,
                        // 是否可以用 for in 遍历枚举
                        enumerable: true,
                    },
                });
                console.log(newObj);
                console.log(newObj.__proto__ == obj);

打印结果输出如下:  
![在这里插入图片描述][f01f55218d9345648d473258c3c79d78.png]

#### 2.1.3 手写实现 ####

通过上面的实列我们知道了 Object.create() 方法在调用过程中进行了怎么样的操作。

1.  声明一个构造函数（这里为什么要先声明一个构造函数呢？就是因为 f.**proto** == F.prototype）
2.  将构造函数的原型对象指向obj（这样可以使得利用F实例化出的实例对象f 的原型对象自然就指向了 obj）
3.  最后将利用F 实例化后的实例对象 返回即可实现,

**具体实现步骤如下**

Object.myCreate = function (proto, propertiesObject = undefined) {
        
                    if (typeof proto !== 'object' && proto !== null && typeof proto !== 'function') {
        
                        throw new Error('Uncaught TypeError: Object prototype may only be an Object or null');
                    }
                    function F() {
        }
                    F.prototype = proto;
                    let obj = new F();
                    if (propertiesObject !== undefined) {
        
                        Object.defineProperties(obj, propertiesObject);
                    }
                    return obj;
                };

**测试使用**

### 2.2 手写实现instanceof方法 ###

#### 2.2.1 基本使用 ####

**instanceof** 的用途是判断一个构造函数的prototype属性是否在某个实例对象原型链上。或者说判断一个对象是某个构造函数的实例。

#### 2.2.2 使用实例 ####

大家先看一段代码，可以想一下会输出什么？

let str = 'hello';
                console.log(str instanceof String);
                let str1 = new String('world');
                console.log(str1 instanceof String);

结果是  
![在这里插入图片描述][d3e72afc43f0451a863dae8182cc1a3f.png]  
‘str’ instanceof String，返回值为false，因为 ‘str’ 就是简单的字符串，它和通过String构造函数(new String(‘str’))创造出来的字符串是 **有区别** 的，

最主要还是判断一个构造函数是否在某个对象的原型链上。

function Person(name, age) {
        
                    this.name = name;
                    this.age = age;
                }
                let person1 = new Person('zs', 19);
                console.log(person1 instanceof Person);
                console.log(person1 instanceof Object);

返回结果均为 **true**

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

function myInstanceOf(left, right) {
        
                    // 获取对象的的原型
                    let proto = Object.getPrototypeOf(left);
                    // 获取构造函数的 prototype 原型对象
                    let prototype = right.prototype;
                    while (true) {
        
                        // 说明到达了原型链的终点，说明该构造函数不在该原型对象上
                        if (!proto) return false;
                        if (proto === prototype) return true;
                        // 一直沿着原型链向上查找
                        proto = Object.getPrototypeOf(proto);
                    }
                }

### 2.3 手写实现new操作符 ###

#### 2.3.1 基本使用 ####

new操作符是用来通过构造函数来创建一个实例对象的

#### 2.3.2 使用实例 ####

利用new方法创建了一个构造函数**Person**的实例对象 **person1**

function Person(name, age) {
        
                    this.name = name;
                    this.age = age;
                }
                let person1 = new Person('zs', 18);
                console.log(person1);

![在这里插入图片描述][a82325c4a1244f09aee4f801afb1e702.png]

#### 2.3.3 手写实现 ####

**具体显示思路**

1.  创建了一个空对象；
2.  将空对象\_\_proto\_\_指向构造函数的原型对象；
3.  将构造函数中的this绑定到新建的对象obj上并进行初始化  
    4.根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理

function newObj(Func, ...args) {
        
                    // 创建一个空对象
                    let obj = {
        };
                    // 将空对象的__proto__指向构造函数的原型对象
                    obj.__proto__ == Func.prototype;
                    let result = Func.apply(obj, args);
                    return result instanceof Object ? result : obj;
                }
                console.log(newObj(Person, 'zs', 30));

测试手写实现的 **newObj** 方法

let person2 = newObj(Person, 'zs', 19);
                console.log(person2);

成功实现  
![在这里插入图片描述][22dd3fcdcc244bfa893a34b195b16a99.png]

[f01f55218d9345648d473258c3c79d78.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/90b5819007e142788aeab8fc6e26571a.png
[d3e72afc43f0451a863dae8182cc1a3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/cff1909731874ea683da12f7ece2b546.png
[a82325c4a1244f09aee4f801afb1e702.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/cc6fd8a97a1c4383b590750f7c827df4.png
[22dd3fcdcc244bfa893a34b195b16a99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/f9c080b6c0a049bca4fa03026a04d38b.png