js原型链继承的傻瓜式详解

本文争取用最简单的语言来讲解原型链继承的OOP原理

0.如果对原型继承还没有大致了解，完全一头雾水，请先阅读

《JavaScript高级程序设计》第六章最后部分的寄生组合式继承

或者_廖雪峰js教程里面面向对象部分的原型承部分https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997013405abfb7f0e1904a04ba6898a384b1e925000

1.类，构造函数和实例

如果对函数使用 new，那么会默认返回一个对象，这个对象是该函数的实例。

如

var x = new Object();

此时x是一个Object的实例

假如我们有两种构造函数

//情况A
function Person(name,age){
    this.name = name;
    this.age = age;

    this.sayHi = function (){
        alert("Hi,I‘m "  + this.name);
    }
}

var wang = new Person(‘老王‘,30);
var li = new Person(‘老李‘,22);

wang.sayHi == li.sayHi //false

//情况B

function Person(name,age){
    this.name = name;
    this.age = age;
}

Person.prototype.sayHi = function (){
    alert("Hi,I‘m "  + this.name);
}

var wang = new Person(‘老王‘,30);
var li = new Person(‘老李‘,22);

wang.sayHi == li.sayHi //true

wang,li是两个Person类的实例，Person是他们的构造函数。

第一种情况A，方法被重复定义，各实例的方法实际上是被分别定义了一遍。第二种情况B，实现了类的方法的复用。

显然，第一种方法里面，sayHi函数是各实例自有的属性，第二种方法，sayHi被定义在了Person的prototype上面。

要点1：当实例对象本身不存在某个属性时，js会查找该实例的【构造函数】的【prototype】属性

2.如何继承

问题来了，如果定义一个子类，比如Student，如何继承Person类。

按照廖雪峰老师和书上比较推荐的方法

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

//--------
function F(){};
F.prototype = Person.prototype;
Student.prototype = new F();
Student.prototype.constructor = Student;
//--------

Student.prototype.sayHello =function(){
        alert("Hello, I‘m "+ this.name +", I‘m in grade " + this.grade + ", nice to meet you.");
    };

var wang_son = new Student(‘老王儿子‘,8,‘二年级‘);
wang_son.sayHi();//Hi,I‘m 老王儿子
wang_son.sayHello();//Hello, I‘m 老王儿子, I‘m in grade 二年级, nice to meet you.
wang_son.sayHi == wang.sayHi; //结果是true

结果来看确实比较良好的实现了继承，可是中间那四行是什么玩意，那个F又是什么？好像除了中间这四行，其它的都挺容易懂。简单的四行代码，把人绕的云里雾里的。

道格拉斯·克罗克福德在 2006年写了一篇文章，题为 Prototypal Inheritance in JavaScript （JavaScript中的原型式继承）。在这篇文章中，他介绍了这种实现继承的方法

如果不是很熟悉js的细节，这个方法看起来多少有点耍杂技。乍一看很绕，理解之后会发现它的精妙之处。

先来看一些假设：如果不这么搞行不行?

不就是继承父类的方法吗，直接Student.prototype = Person.prototype不就得了，

结果是 wang_son.sayHi()返回结果正确，但是父类wang有了儿子用的sayHello()了，这明显不对。

如果wang_son的sayHi需要重写成alert("叔叔好")，那么老王跟你打招呼也会叫叔叔好，这下彻底乱了。

不就是不重叠不覆盖吗，我把父类的prototype里面有的东西浅复制一份，把那四行代码替换成

Object.getOwnPropertyNames(Person.prototype).forEach(function(key){
    Student.prototype[key]=Person.prototype[key]
});

看似没什么问题，改子类代码不会影响父类，但是在后续代码中，如果修改或者添加父类的方法，子类是不会随着变化的。二者的状态只是在复制的一瞬间进行了同步。

那。。。试试把他俩连起来呢？ Student.prototype.prototype = Person.prototype  这不就是标准的继承了吗

想得美！！

要点2：只有函数才有prototype属性。普通实例对象没有！！！

从要点1中得知，访问实例对象没有的属性，会向上追溯，去查该对象的【构造函数的prototype】。

那问题来了，prototype里面也没有怎么办？查prototype的【构造函数的prototype】啊。毕竟prototype也是个实例对象啊。

还是上面那些代码，使用typeof Person.prototype 查看类型，返回的是"Object" 也就是说Person.prototype本身是一个Object的实例。

Person.valueOf();
//显示结果
//? Person(name,age){
//    this.name = name;
//    this.age = age;
//}
Person.valueOf == Object.prototype.valueOf  //返回true

你看Person一路向上查，顺利的调用到了Object的prototype的valueOf方法

那么问题就好办了，如果要Student类要继承Person，或者说，  Student.prototype里面查不到，能继续沿着这个链条往上查 Person.prototype，最简单的办法是什么？

Student.prototype 是 Person 构造出来的就好了。 就这么简单。。。。。。。

你看看最开始那段代码，有个叫老李的是吧，就是li，他是用Person构造出来的，就先让他当老王儿子的干爹吧（￣︶￣）

把中间那四行代码替换一下

function Person(name,age){
    this.name = name;
    this.age = age;
}

Person.prototype.sayHi = function (){
    alert("Hi,I‘m "  + this.name);
}

var wang = new Person(‘老王‘,30);
var li = new Person(‘老李‘,22);

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

//--------下面四行注释掉
//function F(){};
//F.prototype = Person.prototype;
//Student.prototype = new F();
//Student.prototype.constructor = Student;

Student.prototype = li;
//--------

Student.prototype.sayHello =function(){
        alert("Hello, I‘m "+ this.name +", I‘m in grade " + this.grade + ", nice to meet you.");
    };

var wang_son = new Student(‘老王儿子‘,8,‘二年级‘);
wang_son.sayHi();//Hi,I‘m 老王儿子
wang_son.sayHello();//Hello, I‘m 老王儿子, I‘m in grade 二年级, nice to meet you.
wang_son.sayHi == wang.sayHi; //结果是true

然而最神奇的是这么干竟然成了，这叫啥？干爹继承法？

有点反直觉吧。控制台里面直接打li看输出，干爹老李背负了儿子辈的sayHello方法。

Person {name: "老李", age: 22, sayHello: ?}
age: 22
name: "老李"
sayHello: ? ()
__proto__: Object

其实没必要非得老李，现场临时生成一个干爹就成了，把老李那句改成。

Student.prototype = new Person();

一样的效果。

问题来了，继承问题好像完美解决了，一句话能搞定，干嘛写四句。原因是这么干还不完美。

主要问题

1.Student.prototype.constructor 应该指向该类的构造函数，既Student。如果只找个干爹，不做处理，那么会沿着原型链向上查找，一直找到有这个属性的prototype为止。

上面的代码构造出来的实例，wang_son.constructor返回的结果是Person。对应这个问题，一句话修正掉，这里不难理解。

Student.prototype.constructor = Student;

2.wang_son构造函数里面调用了父类Person的构造函数来初始化自己的属性name,age，而此时li里面也有老李的name,age。虽然老李是老王儿子构造函数的prototype，但是老王儿子自己有name,age属性了，wang_son是访问不到老李的属性的。同理，如果是new Person()构造一个实例充当prototype，里面也有name和age，只不过值是undefined，也是死活访问不到的。可见，我们对这个干爹的属性是毫不关心的。

这些属性铁定会被子类实例自己的属性覆盖掉，留着没用，那干脆就不要了，同时也省内存开销。

只要这个干爹能引导我们找到Person的prototype就行，其它无所谓。于是有了下面的代码

function F(){};
F.prototype = Person.prototype;
Student.prototype = new F();

把构造函数弄成空的，prototype设成父类的，这样一来生成的中间实例里面干干净净，并没有多余的属性。而且继承了父类的原型链。

看吧，很简单吧。

把这四句单独打包成函数，往后就可以随便继承了

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

没了

原文地址：https://www.cnblogs.com/gk2017/p/9736233.html

时间： 2024-10-03 22:49:54

js原型链继承的傻瓜式详解的相关文章

js原型链继承

1:Sub.prototype=new supper() 方式1: 原型链继承 1. 套路 1. 定义父类型构造函数 2. 给父类型的原型添加方法 3. 定义子类型的构造函数 4. 创建父类型的对象赋值给子类型的原型 5. 将子类型原型的构造属性设置为子类型 6. 给子类型原型添加方法 7. 创建子类型的对象: 可以调用父类型的方法 2. 关键 1. 子类型的原型为父类型的一个实例对象 --> <script type="text/javascript"> //父类型

js 原型链继承

1.利用call或者apply绑定this的方式,只能继承实例属性.不能继承原型对象上的方法和属性 2.原型链继承 函数B继承函数A :图形示例如下: function A (cat) { this.cat = "猫咪" } A.prototype.myName = function () { console.log(this.dog) } function B (dog) { this.dog = 'nih' } B.prototype = new A () B.prototype.

[js高手之路]原型对象(prototype)与原型链相关属性与方法详解

一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手之路]一步步图解javascript的原型(prototype)对象,原型链 已经分享过了. function CreateObj(uName) {             this.userName = uName;             this.showUserName = function

js原型链继承及调用父类方法

function Rect(config){} Rect.prototype.area = function(){ alert("我是父方法"); } function myRect(config){ arguments.callee.prototype.constructor.prototype.area(); //子类里调用父方法area arguments.callee.prototype.area();//子类里调用重载方法area } myRect.prototype = n

js最好的继承机制：用对象冒充继承构造函数的属性，用原型链继承 prototype 对象的方法。

js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA.prototype.sayColor = function () { alert(this.color); }; function ClassB(sColor, sName) {//在 ClassB 构造函数中,用对象冒充继承 ClassA 类的 sColor 属性 ClassA.call(th

JS 原型链图形详解

JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语言,是通过对象来交互的.即使ECMAScript里边也有基本类型,但是,当需要的时候,它们也会被转换成对象. 一个对象就是一个属性集合,并拥有一个独立的prototype(原型)对象.这个prototype可以是一个对象或者null.* 让我们看一个关于对象的基本例子.一个对象的prototype是

深入理解JS原型链与继承

我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天要讨论的主题,有许多人写过许多精彩的文章,但是今天我还是想把自己的理解的知识记录下来.我在学习 掌握JS原型链和继承的时候,就是看得@阮一峰老师的写的文章,觉得他写的技术类的文章都容易让理解,简明概要,又好理解.他是我学习JS路程里面一个比较佩服的导师,昨天重新看了他写的<Javascript 面向

js原型链与继承（初体验）

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享

浅谈js原型链与继承

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享