理解JS构造函数继承

ninefive 发布于2019-08-19 18:04 / 2216人阅读

摘要：对象之间的继承有以下几个方法用和不推荐多带带使用，定义在中的属性和方法不能继承模式注意需要先继承后定义传统模式推荐，关键点是以及重新改变利用空对象间接继承只继承中的属性，关键点在于利用一个空的构造函数当中介拷贝继承不推荐多带带使用，循环逐一拷贝

对象之间的继承有以下几个方法：

用call和apply(不推荐多带带使用，定义在prototype中的属性和方法不能继承)

prototype模式(注意prototype需要先继承后定义)

传统prototype模式(推荐，关键点是Child.prototype = new Parent.prototype以及重新改变Child.prototype.constructor)

利用空对象间接继承(只继承prototype中的属性，关键点在于利用一个空的构造函数当中介)

拷贝继承(不推荐多带带使用，for循环逐一拷贝)

以上推荐使用传统prototype模式以及call和apply与拷贝继承相配合的模式

用call和apply

</>复制代码 
function Chinese() {
    this.nationality = "Chinese";
}
function Person(name, age) {
    Chinese.apply(this); //这里改变了Chinese中this的指向
    this.name = name;
    this.age = age;
}
var p1 = new Person("Oli", 18);
console.log(p1.nationality); //Chinese

传统prototype模式

</>复制代码 
function Chinese() {
    this.nationality = "Chinese";
}
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype = new Chinese(); //这里因为在prototype中使用了new，则会指向Chinese
console.log(Person.prototype.constructor); //Chinese(){}
Person.prototype.constructor = Person; //这里需要把constructor构造函数重新改为Person
console.log(Person.prototype.constructor); //Person(){}
var p1 = new Person("Oli", 18);
console.log(p1.nationality); //Chinese

需要注意的是：在继承中，如果替换了prototype，那么新的prototype必须修改constructor属性，将这个属性指回到原来的构造函数。

利用空对象间接继承

</>复制代码 
function Chinese() {}
Chinese.prototype.nationality = "Chinese";
function Person(name, age) {
    this.name = name;
    this.age = age;
}
function F(){}; //空对象几乎不占用内存
F.prototype = Chinese.prototype;
Person.prototype = new F();
Person.prototype.constructor = Person;
Person.prototype.sayName = function() { //Person的prototype中的方法和属性需要在继承之后定义
    console.log(this.name);
};
var p1 = new Person("Oli", 18);
console.log(p1.nationality); //Chinese
p1.sayName(); //Oli

可以将该方法定义为函数：

</>复制代码 
function extend(Child, Parent) {
    var F = function() {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype; //用于访问父对象的prototype，可用可不用
}

举例：

</>复制代码 
function extend(Child, Parent) {
    var F = function() {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;
}
function Chinese() {}
Chinese.prototype.nationality = "Chinese";
function Person(name, age) {
    this.name = name;
    this.age = age;
}
extend(Person, Chinese);
Person.prototype.sayName = function() {
    console.log(this.name);
};
var p1 = new Person("Oli", 18);
console.log(p1.nationality); //Chinese
p1.sayName(); //Oli

拷贝继承

使用下面的函数逐一将prototype的属性和函数拷贝到对象中：

</>复制代码 
function extend(Child, Parent) {　　　　
    var p = Parent.prototype;　　　　
    var c = Child.prototype;　　　　
    for (var i in p) {　　　　　　
        c[i] = p[i];　　　　　　
    }　　　　
    c.uber = p;　　
}

不需要先继承后定义

传统prototype模式继承（例子）

</>复制代码 
function Parent() {
    this.name = "thisIsName";
}
Parent.prototype.sayName = function() {
    return this.name;
};
function Child() {
    this.age = "thisIsAge";
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
Child.prototype.sayAge = function() {
    return this.age;
};
var c = new Child();
console.log(c.name);
console.log(c.age);
console.log(c.sayName());
console.log(c.sayAge());

call和apply与拷贝继承相配合（例子）

</>复制代码 
function extend(C, P) {
    var p = P.prototype;
    var c = C.prototype;
    for(var i in p){
        c[i] = p[i];
    }
    c.uber = p;
}
function Parent() {
    this.name = "thisIsName";
}
Parent.prototype.sayName = function() {
    return this.name;
};
function Child() {
    Parent.apply(this); //继承构造函数内的属性和方法
    this.age = "thisIsAge";
}
Child.prototype.sayAge = function() {
    return this.age;
};
extend(Child, Parent); //不需要先继承后定义
var c = new Child();
console.log(c.name);
console.log(c.age);
console.log(c.sayName());
console.log(c.sayAge());

GPU云服务器云服务器继承构造函数构造函数继承 JS构造函数 php 构造方法继承

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

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

你是否理解js的Object与Function与原型链

摘要：原型对象是由创建的，因此原型对象的构造函数是构造函数也可以是称为对象，原型对象也就继承了其生父构造函数中的数据，也同时继承了原型对象的数据。当然这条原型链中的数据，会被还是还是这类构造函数继承，但是不会被这些继承，他们不处于同一个链条上。 js中，Function的本质是什么？Object的本质又是什么？js中有几条原型链？ showImg(https://segmentfault.c...

itvincent 2019-08-20 17:51 评论0 收藏0
js继承的理解

摘要：创建自定义的构造函数之后，其原型对象只会取得属性，其他方法都是从继承来的。优缺点寄生式继承在主要考虑对象而不是创建自定义类型和构造函数时，是十分有用的。原文链接：https://kongchenglc.coding.me... 1.原型链 js的继承机制不同于传统的面向对象语言，采用原型链实现继承，基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。理解原型链必须先理...

BlackFlagBin 2019-08-20 16:34 评论0 收藏0
JS中原型的理解

摘要：我们都知道在的世界中，几乎所有东西都是对象，而对象又是通过继承来层层获得属性和方法，首先我们要区分对象和构造函数的区别，中对象继承的是对象，函数继承的是函数虽然函数也是对象，只有函数才有原型属性供它实例的对象继承，也就是说在中显示如下字符串我们都知道在JS的世界中，几乎所有东西都是对象，而对象又是通过继承来层层获得属性和方法， var str = new String(mario);...

fxp 2019-08-20 19:03 评论0 收藏0
面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0
js继承从入门到理解

摘要：问题修改实例的，即修改了构造函数的原型对象的共享属性到此处，涉及到的内容大家可以再回头捋一遍，理解了就会觉得醍醐灌顶。开场白大三下学期结束时候，一个人跑到帝都来参加各厂的面试，免不了的面试过程中经常被问到的问题就是JS中如何实现继承，当时的自己也是背熟了实现继承的各种方法，回过头来想想却不知道__proto__是什么，prototype是什么，以及各种继承方法的优点和缺点，想必有好...

不知名网友 2019-08-23 12:09 评论0 收藏0
JavaScript之深入各种继承

摘要：通常有这两种继承方式接口继承和实现继承。理解继承的工作是通过调用函数实现的，所以是寄生，将继承工作寄托给别人做，自己只是做增强工作。适用基于某个对象或某些信息来创建对象，而不考虑自定义类型和构造函数。一、继承的概念继承，是面向对象语言的一个重要概念。通常有这两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。《JS高程》里提到：由于函数没有签名，...

tomlingtm 2019-08-23 17:08 评论0 收藏0