JavaScript 手写代码 第一期

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);

打印结果输出如下:

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;
            };

测试使用

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

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);

结果是

‘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);

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);

成功实现