总结构造函数与非构造函数原型继承的一个方法

这两天真的一直在看原型以及继承之间的千丝万缕，哇，收获颇多，不过所谓温故知新，还是要多复习复习知识点，才能察觉那些之前不易发现的小小sparkle

真心推荐MDN文档——对象原型，JavaScript 中的继承，文档指出了很多原理性的东西，所谓饮水思源，大家千万不要轻易就相信别人说什么好哇就像挖到宝藏一样，要多实践，多探索原理性的东西你才能真正把它掌握，它才真的是你的东西。

期间我还参考了阮一峰老师的Javascript 面向对象编程（一）：封装，Javascript面向对象编程（二）：构造函数的继承

Javascript面向对象编程（三）：非构造函数的继承

廖雪峰老师的原型继承

在MDN文档以及廖雪峰老师那里都提到了构造函数继承的一种方法：（这里主要说明继承的一个办法，原理性的说明请看以上推荐链接）

function Person(first, last, age, gender, interests) {this.name = {first,last};this.age = age;this.gender = gender;this.interests = interests;
};Person.prototype.greeting = function() {alert('Hi! I\'m ' + this.name.first + '.');
};

这里先说明一下，在构造函数中，属性最好都写在构造函数里，而方法最后都写在prototype（原型对象）里，这样层次比较分明，但是如果是常属性（值不变），那么他可以写进prototype里，这样可以减少内存的占据

我们现在要创建一个Teacher类，需要继承Person的所有属性和方法，

同时也包括：

一个新的属性subject——这个属性包含了教师教授的学科。

一个被更新的greeting()方法，这个方法打招呼听起来比一般的greeting()方法更正式一点——对于一个教授一些学生的老师来说。

MDN文档的做法是：

function Teacher(first, last, age, gender, interests, subject) {// 调用person构造函数，绑定this变量:Person.call(this, first, last, age, gender, interests); this.subject = subject;
}Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;

而这里廖雪峰老师的做法的第一步也是（与廖老师文章里例子不同但原理相似）

 Person.call(this, first, last, age, gender, interests); this.subject = subject;

之后他指出，调用了Person构造函数不等于继承了Person，Teacher创建的对象的原型是：

new Teacher() ----> Teacher.prototype ----> Object.prototype ----> null

必须想办法把原型链修改为：

new Teacher() ----> Teacher.prototype ----> Person.prototype ----> Object.prototype ----> null

我们必须借助一个中间对象来实现正确的原型链，这个中间对象的原型要指向Person.prototype。为了实现这一点，参考道爷（就是发明JSON的那个道格拉斯）的代码，中间对象可以用一个空函数F来实现：

// 空函数F:
function F() {
}// 把F的原型指向Student.prototype:
F.prototype = Person.prototype;// 把Teacher的原型指向一个新的F对象，F对象的原型正好指向Person.prototype:
Teacher.prototype = new F();// 把PrimaryStudent原型的构造函数修复为Teacher:
Teacher.prototype.constructor = Teacher;

重写Teacher的greeting函数：

Teacher.prototype.greeting = function() {var prefix;if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {prefix = 'Mr.';} else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {prefix = 'Mrs.';} else {prefix = 'Mx.';}alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
};

验证：

var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');teacher1.name.first;
teacher1.interests[0];
teacher1.bio();
teacher1.subject;
teacher1.greeting();

廖老师用空函数的方法实现了间接继承又不占用多少空间，Teacher.prototype的改写也不会影响上一级的prototype，妙也！

但是为什么MDN文档用

Teacher.prototype = Object.create(Person.prototype);

就基本全搞定继承了呢？

带着好奇我查了这个函数的原理

 Object.create =  function (o) {var F = function () {};F.prototype = o;return new F();};

哈哈哈哈，这不是跟廖老师的方法一样嘛，也是造一个空函数，然后间接实现函数的继承！

而非构造函数中，阮老师总结的第一个方法 object()方法，其原理类似于Object.create()

function object(o) {function F() {}F.prototype = o;return new F();}

 var Chinese = {nation:'China',greeting:function (name) {alert('Hi! I\'m ' + name+' from '+this.nation+ '.');}};var Doctor =Object.create(Chinese);Doctor.career='doctor';Doctor.greeting=function(name){alert('Hi! I\'m a ' + this.career+' from '+this.nation+ ',my name is '+name+ ' .');};alert(Doctor.nation);//ChinaDoctor.greeting('Emma');//Hi! I'm a doctor from China,my name is Emma .

大家可以试试看。

好的，总结到此啦，阮一峰老师提到了很多构造函数的继承方法，但是各有利弊吧，原型以及继承这块‘深海‘’还是需要我们多去翻滚才行，这里顺便抛一个new方法原理，自己好好瞎捉摸吧哈哈哈哈

总结构造函数与非构造函数原型继承的一个方法相关推荐

JavaScript 面向对象编程（二） —— 构造函数 / 原型 / 继承 / ES5 新增方法
本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...
初学JavaScript：原型继承/盗用构造函数继承/组合继承/寄生式继承/原型式继承/寄生组合式继承
文章目录继承简介 1.原型链继承默认原型判断原型与实例间是否为继承关系原型继承中的方法原型链的破坏原型继承的问题 2.盗用构造函数继承简介盗用构造函数继承的问题 3.组合继承简介 ...
JavaScript进阶-编程思想、构造函数的原型对象、对象原型、原型继承以及原型链
编程思想面向过程面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了. 优点: 性能比面向对象高,适合跟硬件联系很紧密的东西,例如单 ...
JavaScript [ 转 ] —— 面向对象编程（三）：非构造函数的继承
作者:阮一峰这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承" ...
Javascript面向对象编程（三）：非构造函数的继承
今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Ch ...
Javascript非构造函数的继承
一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' };还有一个对象,叫做&quo ...
构造函数、实例、原型对象、继承
一.构造函数与原型对象之间的关系: 有一个Star构造函数,每一个构造函数里面都有一个原型对象,是通过构造函数的prototype指向这个原型对象的同样在这个原型对象里面也有一个属性叫constru ...
JavaScript学习总结(二十)——Javascript非构造函数的继承
一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". 1 var Chinese = { 2 nation:'中国' 3 }; 还有一个对象 ...
js创建对象，构造函数，this，原型，继承
js创建对象 1.使用构造函数使用函数声明式创建函数对象 (各实例间互不影响,是两个不同的实例) function Fun(){this.name = ['林北星','张万森','展宇'];this ...

总结构造函数与非构造函数原型继承的一个方法

总结构造函数与非构造函数原型继承的一个方法相关推荐

最新文章

热门文章

总结 构造函数与非构造函数 原型继承的一个方法

总结 构造函数与非构造函数 原型继承的一个方法相关推荐

最新文章

热门文章

总结构造函数与非构造函数原型继承的一个方法

总结构造函数与非构造函数原型继承的一个方法相关推荐