javascript之继承

lavor 发布于2019-08-21 14:34 / 3347人阅读

摘要：阮一峰的讲解构造函数继承动物构造函数绑定大毛黄色动物模式大毛黄色动物如果替换了，都要为新的对象加上属性，并将这个属性指向原来的对象。

阮一峰的讲解

构造函数继承

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

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

构造函数绑定

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

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

prototype模式

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

PS:如果替换了prototype，都要为新的prototype对象加上constructor属性，并将这个属性指向原来的对象。

直接继承prototype

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

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

与前一种方法相比，由于不用执行和建立Animal的实例了，比较省内存
缺点：Animal.prototype.constructor === Cat

利用空对象作为中介

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

F是空对象，几乎不占内存

拷贝继承

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

function extend(Child,Parent) {
    var p = Parent.prototype;
    var c = Child.prototype;
    for(var i in p){
        c[i] = p[i];
    }
}

非构造函数的继承

var  Chinese = {
    nation: "中国"
}；
var Doctor = {
    career: "医生"
}

两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现继承

object()方法

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}把子对象的prototype属性指向父对象

var Doctor = object(Chinese);
Doctor.career = "医生";
alert(Doctor.nation); // 中国

浅拷贝

function extend(p) {
    var c = {};
    for(var i in p){
        c[i] = p[i];
    }
    return c;
}

浅拷贝只能拷贝基本类型的数据

深拷贝

能够实现数组和对象的拷贝

function deepCopy(p,c){
    var c = c || {};
    for(var i in p){
        if(typeof p[i] === "Object"){
            c[i] = (p[i].constructor === "Array")? [] : {};
            deepCopy(p[i],c[i]);
        }else{
            c[i] = p[i];
        }
    }
    return c;
}

云服务器 GPU云服务器 javascript继承 javascript继承方法 Javascript实现继承 javascript类的继承

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

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

JavaScript深入之继承的多种方式和优缺点

摘要：深入系列第十五篇，讲解各种继承方式和优缺点。优点融合原型链继承和构造函数的优点，是中最常用的继承模式。寄生组合式继承为了方便大家阅读，在这里重复一下组合继承的代码组合继承最大的缺点是会调用两次父构造函数。 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎...

JackJiang 2019-08-20 16:30 评论0 收藏0
面向对象的JavaScript之继承(一) 类式继承

摘要：那你们肯定会问为什么共用，而没有共用呢，下面就给你解释，请看引用类型是共用的值类型是私用的。引言面向对象的编程语言都具继承这一机制,而 JavaScript 是基于原型(Prototype)面向对象程序设计,所以它的实现方式也是基于原型(Prototype)实现的. 继承的方式类式继承构造函数继承组合继承原型式继承寄生式继承寄生组合式继承 1.类式继承 //声明父...

forsigner 2019-08-20 14:21 评论0 收藏0
javascript面向对象之“多态”

摘要：之前，本质上不能算是一门面向对象的编程语言，因为它对于封装继承多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。所以在中出现了等关键字，解决了面向对象中出现了问题。 ES6之前，javascript本质上不能算是一门面向对象的编程语言，因为它对于封装、继承、多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以让我们以...

JerryWangSAP 2019-08-23 14:11 评论0 收藏0
面向对象的JavaScript之继承(二) 构造函数继承

摘要：引言创建即继承构造函数继承何为构造函数如果你还不清楚构造函数和普通函数的区别那请看构造函数与普通函数构造函数继承构造函数继承的核心是或的使用通过这个方法改变函数的作用环境为父类添加方法声明子类子类通过将子类中的变量在父类中执行了一遍由引言创建即继承---构造函数继承何为构造函数?如果你还不清楚构造函数和普通函数的区别,那请看JavaScript构造函数与普通函数构造函数继承构...

laoLiueizo 2019-08-20 14:22 评论0 收藏0
深入理解 Javascript 之继承

摘要：继承继承子类可以使用父类的所有功能，并且对这些功能进行扩展。类继承父类父类添加共有方法子类继承父类子类添加共有方法其中最核心的一句代码是将原型指向了父类的原型对象。继承继承：子类可以使用父类的所有功能，并且对这些功能进行扩展。继承的过程，就是从一般到特殊的过程。类继承 // 父类 var supperClass = function() { var id = 1; thi...

wuyangnju 2019-08-23 10:56 评论0 收藏0
【JavaScript】面向对象之继承

摘要：一继承原型式继承定义临时构造函数，作为参数传入对象作为着构造函数原型，并最后返回该构造函数的实例对象定义一个临时构造函数遍历对象属性和方法将函数参数作为函数的原型姜构造函数创造的对象进行返回犬夜叉借助构造函数无论是原型链还是原型式继承，都有 JS(JavaScript) 一.继承1.原型式继承定义临时构造函数，作为参数传入对象作为着构造函数原型，并最后返回该构造函数的实例对象 func...

sewerganger 2019-08-26 12:16 评论0 收藏0