通过模拟js的new操作符来深入理解new的用途

2020-4-8 12:09:41
学习记录
98

待模拟的例子

// Otaku 御宅族,简称宅 function Otaku (name, age) { this.name = name; this.age = age; this.habit = 'Games'; } // 因为缺乏锻炼的缘故,身体强度让人担忧 Otaku.prototype.strength = 60; Otaku.prototype.sayYourName = function () { console.log('I am ' + this.name); } var person = new Otaku('Kevin', '18'); console.log(person.name) // Kevin console.log(person.habit) // Games console.log(person.strength) // 60 person.sayYourName(); // I am Kevin

通过createFactory()来模拟new

function objectFactory(){ var obj = new Object(); Constructor = [].shift.call(arguments);//这一步对传入的构造器和其他参数进行分离 obj.__proto__ = Constructor.prototype;//把新建的实例对象的原型指向,构造器原型的原型(这一步就是修改实例对象原型,指向正确的构造器) var res = Constructor.apply(obj,arguments);//调用构造器,就可以把arguments中分离构造器后的剩余参数传入,从而调用构造器,复制构造器中的属性和方法!注意这一步是复制构造器中的!!比如this.name等等 return typeof res === 'object' ? res : obj;//如果构造器返回的是一个新对象,那就返回该对象,如果返回的是一个基本类型,则返回obj; }

测试模拟效果

function Otaku (name, age) { this.name = name; this.age = age; this.habit = 'Games'; } Otaku.prototype.strength = 60; Otaku.prototype.sayYourName = function () { console.log('I am ' + this.name); } function objectFactory(){ console.log(arguments); var obj = new Object(); var Constructor = [].shift.call(arguments); console.log(Constructor); obj.__proto__ = Constructor.prototype; Constructor.apply(obj,arguments); return obj; } objectFactory(Otaku,'li','18'); //返回Otaku {name: "li", age: "18", habit: "Games"}

new的模拟实现

avatar

Sky(小新)

个人签名: 提升能力,创造价值!

江苏-南京
skylpz@qq.com