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() 方法在调用过程中进行了怎么样的操作。
- 声明一个构造函数（这里为什么要先声明一个构造函数呢？就是因为 f.proto == F.prototype）
- 将构造函数的原型对象指向obj（这样可以使得利用F实例化出的实例对象f 的原型对象自然就指向了 obj）
- 最后将利用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 手写实现
具体显示思路
- 创建了一个空对象；
- 将空对象__proto__指向构造函数的原型对象；
- 将构造函数中的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 方法文章来源：https://www.toymoban.com/news/detail-496743.html
let person2 = newObj(Person, 'zs', 19);
console.log(person2);
成功实现
文章来源地址https://www.toymoban.com/news/detail-496743.html
到了这里，关于JavaScript 手写代码 第一期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
