小白谈谈对JS原型链的理解(3)

小白谈谈对JS原型链的理解

小白谈谈对JS原型链的理解

这里第一次执行的时候,得到 Person.prototype.age = undefined, Person.prototype.hobby = ['running','football'],第二次执行也就是 var p1 = new Person('Jack', 20) 的时候,得到 p1.age =20, p1.hobby = ['running','football'],push后就变成了 p1.hobby = ['running','football', 'basketball']。其实分辨好 this 的变化,理解起来也是比较简单的,把 this 简单替换一下就能得到这个结果了。 如果感觉理解起来比较绕的话,试着把脑子里面的概念扔掉吧,把自己当浏览器从上到下执行一遍代码,结果是不是就出来了呢?

通过第二次执行原型的构造函数 Mother(),我们在对象实例中复制了一份原型的属性,这样就做到了与原型属性的分离独立。细心的你会发现,我们第一次调用 Mother(),好像什么用都没有呢,能不调用他吗?可以,就有了下面的寄生组合式继承。

2)寄生组合式继承

function object(o){ function F(){} F.prototype = o; return new F(); } function inheritPrototype(Person, Mother){ var prototype = object(Mother.prototype); prototype.constructor = Person; Person.prototype = prototype; } function Mother (age) { this.age = age; this.hobby = ['running','football'] } Mother.prototype.showAge = function () { console.log(this.age); }; function Person (name, age) { Mother.call(this, age); this.name = name; } inheritPrototype(Person, Mother); Person.prototype.showName = function () { console.log(this.name); } var p1 = new Person('Jack', 20); p1.hobby.push('basketball');//p1:'Jack'; __proto__:20,['running','football'] var p2 = new Person('Mark', 18); //p2:'Mark'; __proto__:18,['running','football']

结果是酱紫的:

小白谈谈对JS原型链的理解

小白谈谈对JS原型链的理解

原型中不再有 age 和 hobby 属性了,只有两个方法,正是我们想要的结果!

关键点在于 object(o) 里面,这里借用了一个临时对象来巧妙避免了调用new Mother(),然后将原型为 o 的新对象实例返回,从而完成了原型链的设置。很绕,对吧,那是因为我们不能直接设置 Person.prototype = Mother.prototype 啊。

小结

-------------------------------------------------------------------------------

说了这么多,其实核心只有一个:属性共享和独立的控制,当你的对象实例需要独立的属性,所有做法的本质都是在对象实例里面创建属性。若不考虑太多,你大可以在Person里面直接定义你所需要独立的属性来覆盖掉原型的属性。总之,使用原型继承的时候,要对于原型中的属性要特别注意,因为他们都是牵一发而动全身的存在。

下面简单罗列下js中创建对象的各种方法,现在最常用的方法是组合模式,熟悉的同学可以跳过到文章末尾点赞了。

1)原始模式

//1.原始模式,对象字面量方式 var person = { name: 'Jack', age: 18, sayName: function () { alert(this.name); } }; //1.原始模式,Object构造函数方式 var person = new Object(); person.name = 'Jack'; person.age = 18; person.sayName = function () { alert(this.name); };

显然,当我们要创建批量的person1、person2……时,每次都要敲很多代码,资深copypaster都吃不消!然后就有了批量生产的工厂模式。

2)工厂模式

//2.工厂模式,定义一个函数创建对象 function creatPerson (name, age) { var temp = new Object(); person.name = name; person.age = age; person.sayName = function () { alert(this.name); }; return temp; }

工厂模式就是批量化生产,简单调用就可以进入造人模式(啪啪啪……)。指定姓名年龄就可以造一堆小宝宝啦,解放双手。但是由于是工厂暗箱操作的,所以你不能识别这个对象到底是什么类型、是人还是狗傻傻分不清(instanceof 测试为 Object),另外每次造人时都要创建一个独立的temp对象,代码臃肿,雅蠛蝶啊。

3)构造函数

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzppjs.html