理解javascript构造函数继承

浅浅的花香味﹌ 2022-09-23 15:57 205阅读 0赞

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

*  用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());

源引：https://segmentfault.com/a/1190000004906911

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript 的七种继承方式（二）借用构造函数

调用构造函数在上一篇中我们提到，原型继承中由于原型属性和方法都是共享的，所以对于引用类型的属性就会存在一些问题。为了解决这个问题，开发人员开始使用一种叫做借用构造函数的

深藏阁楼爱情的钟/ 2022年11月29日 05:46/ 0 赞/ 174 阅读

相关 9. JavaScript 构造函数和原型、ES5继承

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： [2019全新javaScript进阶面向对象ES6][2019_j

╰+攻爆jí腚メ/ 2022年10月08日 11:10/ 0 赞/ 184 阅读

相关理解javascript构造函数继承

对象之间的继承有以下几个方法：用call和apply(不推荐单独使用，定义在prototype中的属性和方法不能继承) prototype模式(注意protot

浅浅的花香味﹌/ 2022年09月23日 15:57/ 0 赞/ 205 阅读

相关 Javascript 面向对象编程（一）：封装/构造函数的继承/非构造函数的继承

原文地址：http://www.ruanyifeng.com/blog/2010/05/object-oriented\_javascript\_encapsulation.h

清疚/ 2022年07月16日 08:09/ 0 赞/ 243 阅读

相关 Javascript面向对象编程（二）：构造函数的继承

作者： [阮一峰][Link 1] 日期： [2010年5月23日][2010_5_23] 这个系列的[第一部分][Link 2]，主要介绍了如何"封装"数据

秒速五厘米/ 2022年06月07日 12:52/ 0 赞/ 219 阅读

相关 javascript中的深浅拷贝（非构造函数的继承）

首先，我们应该明确深浅拷贝是针对`Array`、`Object`这样的复杂类型的。一常见的深浅拷贝的方法（1）数组和对象的浅拷贝如果是数组，我们可以利用数组的一

红太狼/ 2022年05月23日 07:37/ 0 赞/ 194 阅读

相关继承和构造函数笔记

package com.box; public class Box { double width; double height;

骑猪看日落/ 2022年05月17日 13:09/ 0 赞/ 202 阅读

相关 javascript的继承——构造函数继承

构造函数继承方式： Father.call(this, args); 构造函数继承的几个特点： 1. 父类构造函数中的属性和方法都可以被子类继承； 2. 父类原型上的

爱被打了一巴掌/ 2021年12月09日 04:39/ 0 赞/ 391 阅读

相关 Javascript面向对象编程：构造函数的继承

今天要介绍的是，对象之间的"继承"的五种方法。比如，现在有一个"动物"对象的构造函数。 > 　　function Animal()\{ > > 　　　　this.sp

矫情吗；*/ 2021年09月14日 06:54/ 0 赞/ 398 阅读

相关函数原型构造函数安全类构造函数继承原型式继承组合式继承寄生式继承寄生组合式继承内置构造函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

超、凢脫俗/ 2021年09月02日 07:05/ 0 赞/ 409 阅读