Javascript学习总结—

继承发展史

1. 传统继承方式——原型链

Grand.prototype.lastName = 'Lee';
function Grand() {}
var grand = new Grand();Father.prototype = grand;
function Father() {this.name = 'hehe';
}
var father = new Father();Son.prototype = father;
function Son() {}
var son = new Son();

假设我们只想让son继承Grand的原型上的lastName属性，但根据原型链，son还会继承father上的name属性。不管是不是想继承的属性都会被继承。

2. 借用构造函数

function Person(name, age, sex) {this.name = name;this.age = age;this.sex = sex;
}function Student(name, age, sex, grade) {Person.call(this, name, age, sex);this.grade = grade;
}
var stu = new Student();

使用call/apply来借用构造函数，并不是传统意义上的继承，不能继承借用的构造函数的原型
且虽然视觉效果上使用call/apply借用构造函数优化了代码，可每次在使用Student()构造函数创建新对象时，实际上多调用了一个Person()函数。

3. 共享原型

Father.prototype.lastName = 'Lee';
function Father() {}function Son() {}
Son.prototype = Father.prototype;

将Father的prototype直接赋值给Son的prototype，使他们俩共用一个原型。
可将此功能封装为一个函数

function inherit(Target, Origin) {Target.prototype = Origin.prototype;
}Father.prototype.lastName = 'Lee';
function Father() {}function Son() {}inherit(Son, Father);
var son = new Son();

可因为共用原型，所以无法再给自身原型添加特有属性。

4. 圣杯模式

将原型链与共享原型两种方式进行结合，得出这种新的模式

新建一个构造函数
function F() {}
使F与Father共享原型，即 F.prototype = Father.prototype;
使Son.prototype = new F();
此时，Son.prototype.__proto__ = F.prototype;
而，F.prototype =  Father.prototype;
所以能通过原型链继承Father.prototype上的属性
var son = new Son();
son.__proto__-->new F()-->new F().__proto__-->Father.prototype而这时，修改Son.prototype上的属性，并不会影响到Father.prototype。

Father.prototype.lastName = 'Lee';
function Father() {}function Son() {}function inherit(Target, Origin) {function F() {}F.prototype = Origin.prototype;Target.prototype = new F();
}
inherit(Son, Father);var son = new Son();
var father = new Father();
Son.prototype.firstName = 'Ricardo';

为防止constructor指向紊乱，通常会在inherit()中加上一条语句

Target.prototype.constructor = Target;

而有时我们希望知道，Target到底继承自谁，所以还会加上一句

Target.prototype.uber = Origin.prototype;

function inherit(Target, Origin) {function F() {}F.prototype = Origin.prototype;Target.prototype = new F();Target.prototype.constructor = Target;Target.prototype.uber = Origin.prototype;
}

Javascript学习总结——继承相关推荐

JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承继承第一种方式:对象冒充 <script type="text/javascript">//继承第一种方式: ...
JavaScript学习（五十六）—寄生式继承（临时构造器的使用）
JavaScript学习(五十六)-寄生式继承(临时构造器的使用) 寄生式继承(临时构造器的使用): 之所以要使用临时构造器就是要在实现原型链继承时获取上级构造方法原型中的内容,而不要它的私有属性默 ...
JavaScript学习（五十五）—组合继承
JavaScript学习(五十五)-组合继承组合继承:就是借用构造方法继承和原型链继承的组合形式
JavaScript学习（五十三）—借用构造方法继承
JavaScript学习(五十三)-借用构造方法继承一.借用构造方法的继承格式: function 构造方法1(形参1,形参2,形参3...){构造方法1.call(this,形参1,形参2,形参 ...
JavaScript学习（五十二）—继承、call方法和apply方法
JavaScript学习(五十二)-继承.call方法和apply方法学习内容一.继承二.call方法三.apply方法一.继承所谓继承就是两个构造方法建立起来的某种联系,通过某种联系,可 ...
JavaScript学习笔记（四）---闭包、递归、柯里化函数、继承、深浅拷贝、设计模式
JavaScript学习笔记(四)---闭包.递归.柯里化函数.继承.深浅拷贝.设计模式 1. 匿名函数的使用场景 2.自运行 3.闭包 3.1前提: 3.2闭包 4.函数对象的三种定义方式 5.th ...
JavaScript学习笔记之对象及继承
JavaScript学习笔记之对象及继承对象属性 ES5中有两种属性,数据属性和访问器属性. 数据属性包括[[writable]](能否修改属性的值).[[value]]等等: 访问器属性包括[[C ...
JavaScript语言精粹学习之继承
JavaScript也有面对对象,面的对象很重要的一点就是继承,语言精粹中的继承篇章写的复杂难懂,且有些东西和现在的es6相比太过于老了,读完后这里我自己整理了一下JavaScript的继承,也对语言 ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

Javascript学习总结——继承