开发者社区> 烟海之蓝> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js 继承

简介: 构造函数绑定 function Animal() { this.species = '动物'; } function Cat(name,color){ Animal.apply(this, arguments); this.
+关注继续查看

构造函数绑定

function Animal() {
    this.species = '动物';
}

function Cat(name,color){
    Animal.apply(this, arguments);
    this.name = name;
    this.color = color;
}
var cat1 = new Cat("大毛","黄色");
console.log((cat1.species)); // 动物

prototype模式

function Animal() {
    this.species = '动物';
}

function Cat(name,color){
    this.name = name;
    this.color = color;
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

var cat1 = new Cat("大毛","黄色");
console.log((cat1.species)); // 动物

直接继承prototype

function Animal() {}
Animal.prototype.species = '动物';

function Cat(name,color){
    this.name = name;
    this.color = color;
}

Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;

var cat1 = new Cat("大毛","黄色");
console.log((cat1.species)); // 动物

与前一种方法相比,这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。

利用空对象作为中介 寄生组合继承

function Animal() {}
Animal.prototype.species = '动物';

function Cat(name,color){
    Animal.call(this) // 借用构造函数继承属性
    this.name = name;
    this.color = color;
}

var F = function () {};
F.prototype = Animal.prototype;

Cat.prototype = new F();
Cat.prototype.constructor = Cat;
alert(Animal.prototype.constructor); // Animal
var cat1 = new Cat("大毛","黄色");
console.log((cat1.species)); // 动物


function Extend(child, parent) { // 继承原型的副本
    //var F = function () {};
    //F.prototype = parent.prototype;
    //child.prototype = new F();
       child.prototype = Object.create(parent.prototype)
    child.prototype.constructor = child;
    child.uber= parent.prototype;
}
Extend(Cat, Animal);
var cat1 = new Cat("大毛","黄色");

console.log((cat1.species)); // 动物

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS基础-完美掌握继承知识点
前言 上篇文章详细解析了原型、原型链的相关知识点,这篇文章讲的是和原型链有密切关联的继承,它是前端基础中很重要的一个知识点,它对于代码复用来说非常有用,本篇将详细解析JS中的各种继承方式和优缺点进行,希望看完本篇文章能够对继承以及相关概念理解的更为透彻。 本篇文章需要先理解原型、原型链以及call 的相关知识: JS基础-函数、对象和原型、原型链的关系 js基础-面试官想知道你有多理解call,apply,bind? 何为继承? 维基百科:继承可以使得子类具有父类别的各种属性和方法,而不需要再次编写相同的代码。 继承是一个类从另一个类获取方法和属性的过程。 PS:或者是多个类 JS实现继承
16 0
js基础之闭包与继承
js基础之闭包与继承
41 0
js的几种继承方式
js的几种继承方式
68 0
js继承的六种方式
一、原型继承 function Father() { this.names = ['tom', 'kevin']; } Father.
816 0
JS框架
Modernizr v2.5.3http://www.modernizr.comjQuery JavaScript Library v1.7.2http://jquery.com/ Includes Sizzle.
661 0
+关注
烟海之蓝
程序设计之道,无远弗界,御晨风而返
49
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载