详解js继承

最新推荐文章于 2023-11-02 20:05:06 发布
最新推荐文章于 2023-11-02 20:05:06 发布
阅读量1.3k 收藏 13
点赞数 1
文章标签： javascript 原型模式 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45771601/article/details/123504854
版权

详解js继承

文章目录

一、预备知识

1.构造函数的属性

function A(name){
	this.name = name;	//实例基本属性（该属性强调私有 不共享）
	this.arr = [1];	//实例引用属性（该属性强调私有 不共享）
	this.say = function() {	//实例引用属性 （该属性强调复用  需要共享）
		console.log('helloworld');
	}
}

注意：数组和方法都属于‘实例引用属性’，但数组强调私有、不共享的。方法需要复用、共享。
在构造函数中，一般很少有数组形式的引用属性，大部分情况都是：基本属性+方法。

2.什么是原型对象

简单来说，每个函数都有prototype属性，它就是原型对象，通过函数实例化出来的对象有个__proto__属性，指向原型对象。

let a = new A()
a.__proto__ == A.prototype

//prototype的结构如下
A.prototype = {
	constructor: A,
	...其他的原型属性和方法
}

原型链

3.原型对象的作用

原型对象的用途是为每个实例对象存储共享的方法或属性，它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象，因此有别于实例方法或属性，原型对象仅有一份。而实例有很多份，且实例属性和方法是独立的。在构造函数中：为了属性（示例基本属性）的私有性、以及方法（实例引用属性）的复用、共享，我们提倡：

  • 将属性封装在构造函数中
  • 讲方法定义在原型对象上
function A(name) {
	this.name = name;	//（该属性强调私有 不共享）
}
A.prototype.say = function() {	//定义在原型对象上的方法（强调复用，需要共享）
	console.log('helloworld')
}

//错误的写法：
A.prototype = {
	say: function() {
		console.log('helloworld')
	}
}
//相当于重置了Person的原型对象，使其指向了另外一个对象

二、五种js继承方式

方式1、原型链继承

  • 核心：将父类实例作为子类原型
  • 优点：方法复用
    • 由于方法定义在父类的原型上，复用了父类构造函数的方法。比如say方法。
  • 缺点：
    • 创建子类实例的时候，不能传父类的参数（比如name）。
    • 子类实例共享了父类构造函数的引用属性，比如arr属性（子类的所有实例化对象继承的是同一个父类的对象，他们指向的都是同一块内存）。
    • 无法实现多继承
function Parent(name) {
this.name = name || '⽗亲'; // 实例基本属性 (该属性，强调私有，不共享)
this.arr = [1]; // (该属性，强调私有)
}
Parent.prototype.say = function() { // -- 将需要复⽤、共享的⽅法定义在⽗类原型上
console.log('hello')
}
function Child(like) {
this.like = like;
}
Child.prototype = new Parent() // 核⼼，但此时Child.prototype.constructor==Parent
Child.prototype.constructor = Child // 修正constructor指向
let boy1 = new Child()
let boy2 = new Child()
// 优点：共享了⽗类构造函数的say⽅法
console.log(boy1.say(), boy2.say(), boy1.say === boy2.say); // hello , hello , true
// 缺点1：不能向⽗类构造函数传参
console.log(boy1.name, boy2.name, boy1.name===boy2.name); // ⽗亲，⽗亲，true
// 缺点2: ⼦类实例共享了⽗类构造函数的引⽤属性，⽐如arr属性
boy1.arr.push(2);
// 修改了boy1的arr属性，boy2的arr属性，也会变化，因为两个实例的原型上(Child.prototype)有了⽗类构造函数的实例属性arr；所以只要修改了boy1.arr，boy2.arr的属性也会变化。
console.log(boy2.arr); // [1,2]

注意1：修改boy1的name属性，是不会影响到boy2.name。因为设置boy1.name相当于在⼦类实例新增了name属性。
注意2：console.log(boy1.constructor); // Parent 你会发现实例的构造函数居然是Parent。
⽽实际上，我们希望⼦类实例的构造函数是Child,所以要记得修复构造函数指向。
修复如下：Child.prototype.constructor = Child;

方式2、借用构造函数

  • 核心：借用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类。
  • 优点：实例之间独立。
    • 创建子类实例，可以向父类构造函数传参数。
    • 子类实例不共享父类构造函数的引用属性，如arr属性。
    • 可实现多继承（通过多个call或者apply继承多个父类）
  • 缺点：
    • 子类实例继承不了父类原型上的属性。（因为没有用到原型）
    • 父类的方法不能复用（子类实例继承不了父类原型上的属性，所以方法只能在父构造函数中定义，导致方法不能复用）。
function Parent(name) {
this.name = name; // 实例基本属性 (该属性，强调私有，不共享)
this.arr = [1]; // (该属性，强调私有)
this.say = function() { // 实例引⽤属性 (该属性，强调复⽤，需要共享)
console.log('hello')
}
}
function Child(name,like) {
Parent.call(this,name); // 核⼼ 拷⻉了⽗类的实例属性和⽅法
this.like = like;
}
let boy1 = new Child('⼩红','apple');
let boy2 = new Child('⼩明', 'orange ');
// 优点1：可向⽗类构造函数传参
console.log(boy1.name, boy2.name); // ⼩红， ⼩明
// 优点2：不共享⽗类构造函数的引⽤属性
boy1.arr.push(2);
console.log(boy1.arr,boy2.arr);// [1,2] [1]
详解js继承 4
// 缺点1：⽅法不能复⽤
console.log(boy1.say === boy2.say) // false (说明，boy1和boy2的say⽅法是独⽴，不是共享的)
// 缺点2：不能继承⽗类原型上的⽅法
Parent.prototype.walk = function () { // 在⽗类的原型对象上定义⼀个walk⽅法。
console.log('我会⾛路')
}
boy1.walk; // undefined (说明实例，不能获得⽗类原型上的⽅法)

方式3、组合继承

  • 核心：通过调用父类构造函数，继承父类的属性并保留传参的优点；然后通过将父类实例作为子类原型，实现函数复用。

  • 优点：

    • 保留构造函数的优点：创建子类实例，可以向父类构造函数传参数。
    • 保留原型链的优点：父类的方法定义在父类的原型对象上，可以实现方法复用。
    • 不共享父类的引用属性，比如arr属性。

  • 缺点：

    • 由于调用了两次父类的构造方法，会存在一份多余的父类实例属性。

  • 注意：‘组合继承’这种方式，要记得修复Child.prototype.constructor指向

第⼀次Parent.call(this);从⽗类拷⻉⼀份⽗类实例属性，作为⼦类的实例属性，第⼆次Child.prototype = new Parent();创建⽗类实例作为⼦类原型，Child.protype中的⽗类属性和⽅法会被第⼀次拷⻉来的实例属性屏蔽掉，所以多余。

function Parent(name) {
this.name = name; // 实例基本属性 (该属性，强调私有，不共享)
this.arr = [1]; // (该属性，强调私有)
}
Parent.prototype.say = function() { // --- 将需要复⽤、共享的⽅法定义在⽗类原型上
console.log('hello')
}
function Child(name,like) {
Parent.call(this,name,like) // 核⼼ 第⼆次
this.like = like;
}
Child.prototype = new Parent() // 核⼼ 第⼀次
Child.prototype.constructor = Child // 修正constructor指向
let boy1 = new Child('⼩红','apple')
let boy2 = new Child('⼩明','orange')
// 优点1：可以向⽗类构造函数传参数
console.log(boy1.name,boy1.like); // ⼩红，apple
// 优点2：可复⽤⽗类原型上的⽅法
console.log(boy1.say === boy2.say) // true
详解js继承 5
// 优点3：不共享⽗类的引⽤属性，如arr属性
boy1.arr.push(2)
console.log(boy1.arr,boy2.arr); // [1,2] [1] 可以看出没有共享arr属性。
// 缺点1：由于调⽤了2次⽗类的构造⽅法，会存在⼀份多余的⽗类实例属性

其实Child.prototype = new Parent()
console.log(Child.prototype._ proto _ === Parent.prototype); // true
因为Child.prototype等于Parent的实例，所以__proto__指向Parent.prototype

方式4、组合继承优化1

  • 核心：通过这种方式，砍掉父类的实例对象，这样在调用父类的构造函数的时候，就不会初始化两次实例，避免组合继承的缺点。
  • 优点：
    • 只调用一次父类构造函数。
    • 保留构造函数的优点：父类的实例方法定义在父类的原型对象上，可以实现方法复用。
    • 保留原型链的优点：父类实例方法在父类的原型对象上，可以实现方法复用。
  • 缺点：
    • 修正构造函数的指向之后，父类实例的构造函数指向，同时也发生变化。
  • 注意：‘组合继承优化1’这种方式要记得修复Child.prototype.constructor指向，原因是不能判断子类实例的直接构造函数，到底是子类构造函数还是父类构造函数。
function Parent(name) {
this.name = name; // 实例基本属性 (该属性，强调私有，不共享)
this.arr = [1]; // (该属性，强调私有)
}
Parent.prototype.say = function() { // --- 将需要复⽤、共享的⽅法定义在⽗类原型上
console.log('hello')
}
function Child(name,like) {
Parent.call(this,name,like) // 核⼼
this.like = like;
}
Child.prototype = Parent.prototype // 核⼼ ⼦类原型和⽗类原型，实质上是同⼀个
<!--这⾥是修复构造函数指向的代码-->
Child.prototype.constructor = Child
详解js继承 6
let boy1 = new Child('⼩红','apple')
let boy2 = new Child('⼩明','orange')
let p1 = new Parent('⼩爸爸')
// 优点1：可以向⽗类构造函数传参数
console.log(boy1.name,boy1.like); // ⼩红，apple
// 优点2：可复⽤⽗类原型上的⽅法
console.log(boy1.say === boy2.say) // true
// 缺点1：当修复⼦类构造函数的指向后，⽗类实例的构造函数指向也会跟着变了。
没修复之前：console.log(boy1.constructor); // Parent
修复代码：Child.prototype.constructor = Child
修复之后：console.log(boy1.constructor); // Child
console.log(p1.constructor);// Child 这⾥就是存在的问题(我们希望是Parent)
具体原因：因为是通过原型来实现继承的，Child.prototype的上⾯是没有constructor属性的，
就会往上找，这样就找到了Parent.prototype上⾯的constructor属性；当你修改了⼦类实例的
construtor属性，所有的constructor的指向都会发⽣变化。

方法5、组合继承优化2（寄生组合继承）----完美方式

  • 核心：
  • 优点：完美
  • 缺点：—
function Parent(name) {
this.name = name; // 实例基本属性 (该属性，强调私有，不共享)
this.arr = [1]; // (该属性，强调私有)
}
Parent.prototype.say = function() { // --- 将需要复⽤、共享的⽅法定义在⽗类原型上
console.log('hello')
}
function Child(name,like) {
Parent.call(this,name,like) // 核⼼
this.like = like;
}
// 核⼼ 通过创建中间对象，⼦类原型和⽗类原型，就会隔离开。不是同⼀个啦，有效避免了⽅式4的缺点。
Child.prototype = Object.create(Parent.prototype)
// 这⾥是修复构造函数指向的代码
Child.prototype.constructor = Child
let boy1 = new Child('⼩红','apple')
let boy2 = new Child('⼩明','orange')
let p1 = new Parent('⼩爸爸')
注意：这种⽅法也要修复构造函数的
修复代码：Child.prototype.constructor = Child
详解js继承 7
修复之后：console.log(boy1.constructor); // Child
console.log(p1.constructor); // Parent 完美

其他相关问题

1、Object.create(object,propertiesObject)

Object.create()方法创建一个新对象，使用第一个参数来提供创建对象的__proto__（以第一个参数作为新对象的构造函数的原型）；
方法还有第二个可选参数，是添加到新创建对象的属性，写法如下：

const a = Object.create(Person.prototype, {
age: {
value: 12,
writable:true,
configurable:true,
}
})
  • new与Object.create()的区别？
    new产生的实例，优先获取构造函数上的属性；构造函数上没有对应的属性，才会去原型上查找；如果构造函数中以及原型中都没有对应的属性，就会报错。Object.create()产生的对象，只会在原型上进行查找，原型上没有对应的属性，就会报错。
let Base1 = function() {
this.a = 1
}
let o1 = new Base1()
let o2 = Object.create(Base1.prototype)
console.log(o1.a); // 1
console.log(o2.a); // undefined
let Base2 = function() {}
Base2.prototype.a = 'aa'
let o3 = new Base2()
let o4 = Object.create(Base2.prototype)
console.log(o3.a); // aa
console.log(o4.a); // aa
let Base3 = function() {
this.a = 1
}
Base3.prototype.a = 'aa'
let o5 = new Base3()
let o6 = Object.create(Base3.prototype)
console.log(o5.a); // 1
console.log(o6.a); // aa

2、new的过程

  • 创建新对象（如obj）。
  • 将新对象的__proto__指向构造函数的prototype对象。
  • 执行构造函数，为这个新对象添加属性，并将this指向创建的新对象obj。
  • 当构造函数本身返回值为对象时，返回该对象，否则返回新对象。
//创建Person构造函数，参数为name,age
function Person(name,age){
this.name = name;
this.age = age;
}
function _new(){
//1.拿到传⼊的参数中的第⼀个参数，即构造函数名Func
var Func = [].shift.call(arguments);
//2.创建⼀个空对象obj,并让其继承Func.prototype
var obj = Object.create(Func.prototype);
//3.执⾏构造函数，并将this指向创建的空对象obj
const result = Func.apply(obj,arguments)
//4.当函数也有返回值且为对象时返回该对象，否则返回创建的新对象obj
return (result instanceOf Object ? result : obj)
}
let ming = _new(Person,'xiaoming',18);
console.log(ming);

[].shift.call表示删除并返回auguments[0]。也可以通过以下方式取得函数名和函数的参数：

function _new(Func, ...params){
...
}

Object.create创建obj，使得obj. __ proto__ = Func.prototype

3、为什么‘组合继承’这种方式会执行两次父类构造函数？

  • 第一次：Child.prototype = new Parent()
    ‘new的过程’的第三步，其实就是执行了父类构造函数。
  • 第二次：Parent.call(this,name,like)
    call的作用是改变函数执行时的上下文。比如：A.call(B)。其实，最终执行的还是A函数，只不过是用B来调用而已。所以，你就懂得了了Parent.call(this,name,like) ,也就是执⾏了⽗类构造函数Person。
樱丸小桃子啊
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS的六种继承方式
小王的技术库
01-07 1810
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
详解Javascript继承的实现
10-22
主要介绍了详解Javascript继承的实现的相关资料,需要的朋友可以参考下
JS中的八种继承方法
weixin_70134200的博客
07-14 5084
详细讲解js中的八种继承方法,原型链继承、构造函数继承（经典继承）、组合面试、原型式继承、Object.create()、寄生式继承、寄生组合式继承、ES6类继承
Js实现继承的6种方式
热门推荐
wuliyouMaozhi的博客
07-21 2万+
Js实现继承的6种方式: 1.原型链继承 2.借用构造函数继承 3.组合继承（经典继承） 4.原型式继承 方法一： 方法二：Object.create() 5.寄生式继承 6.寄生组合式继承 7.ES6、Class实现继承
【笔记】JS实现继承的几种方式
weixin_44755080的博客
06-12 2314
JS实现继承的几种方式
js的六种继承方式
weixin_41759744的博客
06-15 7184
1、原型链继承 核心： 将父类的实例作为子类的原型 特点： 1.非常纯粹的继承关系，实例是子类的实例，也是父类的实例 2.父类新增原型方法/原型属性，子类都能访问到 3.简单，易于实现缺点： 1.要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中 2.无法实现多继承 3.来自原型对象的所有属性被所有实例共享（来自原型对象的引用属性是所有实例共享的） 4.创建子类实例时，无法向父类构造函数传参2、构造函数继承（借助 call） 核心：使用父类的构造函数来增强子类实例
JavaScript继承与聚合实例详解
01-19
本文实例讲述了JavaScript继承与聚合。分享给大家供大家参考，具体如下： 一、继承 第一种方式：类与被继承类直接耦合度高 1. 首先，准备一个可以被继承的类（父类），例如 //创建一个人员类 function Person(name)...
Javascript继承机制详解
10-19
JavaScript的继承在很多书里面细致的分了很多种类型和实现方式，大体上就是两种：对象冒充、原型方式。这两种方式各有优点和缺陷，这里我先列举出来，再从底层分析区别
javascript继承机制实例详解
10-25
主要介绍了javascript继承机制,以实例形式详细分析了javascript继承的原理与基于原型链的继承实现方法,具有不错的参考借鉴价值,需要的朋友可以参考下
JavaScript继承
m0_61480985的博客
11-28 1514
寄生组合继承存在效率问题，最主要的效率问题是父类构造函数始终被调用两次，一次是在创建子类原型时调用，另一次是在子类构造函数中调用，本质上，子类原型最终是要包含超类对象的所有实例属性，子类构造函数只要在执行的时候重写自己的原型就可以了。把子类的原型对象指向父类，就能使用父类中的方法和属性了。采用原型式继承不自定义类型，临时创建一个构造函数，借助已有的对象作为临时构造函数的原型，然后在此基础实例化对象，并返回。继承就是指一个子类继承父类的属性和方法，使得子类对象（实例化对象）具有父类的方法和属性。
js 实现继承的12种方法
朝阳39的博客
03-24 3671
1. 原型链 基于构造器工作的模式 js 默认的继承机制 Child.prototype = new Parent(); 将方法与属性集中可复用的部分迁移到原型链中，而将不可复用的部分设置为对象自身的属性 2. 仅从原型继承 基于构造器工作的模式 Child.prototype = Parent. prototype; 不存在原型链，所有的对象共享一个原型对象 优点 由于该模式在构建继承关系时不需要新建对象实例，效率上会有较好的表现 原型链上的查询也会比较快，因为这里根本不存在链 缺点 对子.
JS实现继承的6种方式
weixin_53953052的博客
02-21 582
JS实现继承的6种方式
js继承的七种方式
weixin_45921387的博客
03-28 1909
1、原型链继承 -- 重写prototype 2、构造函数继承 -- Parent.call(this) 3、组合继承 -- 重写prototype + Parent.call(this) 4、原型式继承... 5、寄生式继承... 6、寄生组合式继承... 7、ES6类的继承...
js继承的六种方式
yzx231858的博客
11-01 253
用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的 实例或对象。（原型上的属性是共享的，一个实例修改了原型属 性，另一个实例的原 型属性也会被修改！1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函 数。1、只继承了父类构造函数的属性，没有继承父类原型的属性。1、可以继承父类原型上的属性，可以传参，可复用。2、每个新实例引入的构造函数属性是私有的。
js的继承的六种方法，超全，超详解
最新发布
weixin_62981580的博客
11-02 793
许多面向对象语言都支持两种继承的方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。在 JavaScript 中由于函数没有签名也就无法实现接口继承，而只支持实现继承，而且实现继承主要通过原型链来实现的。
js常见的六种继承方式
weixin_46061399的博客
06-09 526
然后，将子类的原型设置为临时构造函数的实例，从而实现了对父类原型的继承。然后，createObject函数通过增强新对象的方式，在新对象上添加了sayName方法，从而实现继承和增强。在上面的代码中，createObject函数通过将一个空函数的原型设置为obj，从而创建了一个新的对象，并将新对象的原型指向obj，从而实现了继承。寄生组合式继承是指通过借用构造函数来继承实例属性，然后通过将原型设置为一个继承父类原型的实例来继承父类原型上的属性和方法。：这种方式无法继承父类原型对象上的属性和方法。
js对象继承的5种方法
jiangjunyuan168的博客
04-15 4486
1、原型链继承 假设现在有a,b两个函数，b函数的实例如果想要访问a函数的属性和方法。就可以通过b函数的原型（b.prototype）指向a的实例（new a()）来实现，这种继承方法就称为原型链继承。 代码实现： 这里用 parent 和 child 分别表示上述的 a 和 b function parent(){ this.a = '111' } function child(){} child.prototype = new parent() var c = new child() c
总结JS继承的六种方式
AI_huihui的博客
10-15 1万+
1. 继承 1.1语法 //父类 classFather{ } //子类继承父类 classSonextendsFather{ } 例如： classFather{ constructor(sonname){ this.sonname=sonname; } say(){ console.log('你的姓是'+this.sonname); ...
javaScript中的继承extends详解
05-11
在 JavaScript 中，继承是一个非常常见的概念。ES6 引入了 Class 语法糖，让继承更加易于理解和实现。在 Class 中，我们可以使用 extends 关键字来创建一个子类，使其继承父类的属性和方法。 下面我们来详细了解...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值