L - JavaScript继承

joyvw 发布于2019-08-22 15:59 / 2640人阅读

摘要：类式继承原型链继承实现我是的方法我是的方法由于的实例能够访问，所以我们可以设置指向的实例。所以的实例可以访问的实例以及，实现继承缺点由于对象类型的赋值是引用赋值，如果父类实例化过程中有引用类型，那么子类的实例的这个属性都指向同一内存空间。

类式继承（原型链继承） 实现

function A(){
    this.a="a";
    this.arr=[1,2];
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(){
    this.b="b";
}
B.prototype.funB=function(){
    console.log("我是B的方法");
}
B.prototype=new A();

var b1=new B();

由于A的实例能够访问A.prototype，所以我们可以设置B.prototype指向A的实例。所以B的实例可以访问A的实例以及A.prototype，实现继承

缺点：

1.由于对象类型的赋值是引用赋值，如果父类A实例化过程中有引用类型，那么子类B的实例的这个属性都指向同一内存空间。

function A(){
    this.a="a";
    this.arr=[1,2];
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(){
    this.b="b";
}
B.prototype.funB=function(){
    console.log("我是B的方法");
}
B.prototype=new A();

var b1=new B();
var b2=new B();

b1.arr.push(3);
console.log(b1.arr);    // [1, 2, 3]
console.log(b2.arr);    // [1, 2, 3]

2.如果父类的实例需要传入一些参数，那么两个子类实例初始化时某一属性值相同

function A(year){
    this.year=year;
}
function B(){
    this.b="b";
}
B.prototype=new A(18);

var b1=new B();
var b2=new B();
console.log(b1.color);    // 18
console.log(b2.color);    // 18

3.B.prototype中constructor指向不正确，因为B.prototype指向了一个A的实例，所以本应指向B的constructor指向了A

function A(year){
    this.year=year;
}
function B(){
    this.b="b";
}
B.prototype=new A(18);

var b1=new B();

b1.constructor===A    // true

构造函数继承（借用构造函数继承） 实现

function A(color){
    this.a="a";
    this.arr=[1,2];
    this.color=color;
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(color){
    A.call(this,color);
}
B.prototype.funB=function(){
    console.log("我是B的方法");
}

var b1=new B("red");

console.log(b1)    // {a: "a", arr: Array(2), color: "red"}

优点

解决了引用赋值问题，也可以自定义一些属性了，constructor也指向B了，即解决了类式继承的第一个、第二个问题以及第三个问题

缺点

很明显，B除了调用了A这个函数外并没有和A扯上什么关系，原型链是不通的(无法访问到应该作为父类的A的prototype属性)，我甚至并不觉得这是一种继承方式，但它为下面两种方法奠定了基础

b1.__proto__===B.prototype   // true
b1.__proto__.__proto__===Object.prototype    // true

组合继承

说白了，就是将上述两种方法的长处组合到一起，利用原型链实现原型属性和方法的继承，通过借用构造函数实现对实例属性的继承

实现

function A(color){
    this.a="a";
    this.arr=[1,2];
    this.color=color;
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(color,age){
    // 通过借用构造函数实现对实例属性的继承
    A.apply(this,[color]);
    this.age=age;
}

// 利用原型链实现原型属性和方法的继承
B.prototype=new A();
B.prototype.constructor=B;

var b1=new B("red",18);

优点

既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性

缺点

调用了两次父类的构造函数

寄生组合式继承（此方法最好） 实现

function A(color){
    this.a="a";
    this.arr=[1,2];
    this.color=color;
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(color,age){
    A.apply(this,[color]);
    this.age=age;
}

B.prototype=Object.create(A.prototype);
B.prototype.constructor=B;

var b1=new B("red",18);

优点

只需访问一次父类的构造函数,避免了在子类的prototype上创建不必要、多余的属性

专线服务混合云 javascript继承 javascript继承方法 Javascript实现继承 javascript类的继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93928.html

JavaScript instanceof运算符深入分析

摘要：注意基本变量类型不是对象类型，只有基本包装类型才是对象类型。至于显示的原型，在里用属性表示，这个是原型继承的基础知识，在这里就不在叙述了。前言如果你要开发一个复杂的产品，那么肯定少不了使用面向对象机制，当然也避不开 Javascript 里面的继承，instanceof 运算符是原生 Javascript 语言中用来判断实例继承的操作符。所以我们有必要深入理解该运算符！ inst...

zhangyucha0 2019-08-20 16:48 评论0 收藏0
JavaScript继承的六种方式

这是最近在学习js继承时看了多篇文章以及自我总结的学习笔记。目录：一：原型链二：构造函数三：原型链和构造函数组合继承四：原型式五：寄生式六：寄生组合式 1、原型链 function Super(){ this.name = lily; this.age = 21; this.arr = [1,2,3] } function Sub(){} Sub.prototype = new S...

wujl596 2019-08-21 11:22 评论0 收藏0
从Vue源码学习JavaScript之this instanceof Vue

摘要：函数的调用有以下几种方式作为对象方法调用，作为函数调用，作为构造函数调用，和使用或调用。并且规范中说明，只有对象实现了方法。使用了回到上面作为构造函数调用第一步创建一个空的对象，。第二步链接该对象即设置该对象的构造函数到另一个对象，即。在src/core/instance/index.js中 if (process.env.NODE_ENV !== production && !(t...

付永刚 2019-08-23 17:12 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

xuexiangjys 2019-08-02 16:12 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

adie 2019-08-23 16:54 评论0 收藏0