JS有哪些手段可以实现继承？

最新推荐文章于 2023-07-14 20:40:49 发布

cq_csdn_399

最新推荐文章于 2023-07-14 20:40:49 发布

阅读量742

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js 继承

本文链接：https://blog.youkuaiyun.com/qq_29738977/article/details/85106102

js 专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了JavaScript中类的声明方式，包括传统的function构造函数和现代的ES6 class语法。详细讲解了四种实现继承的方法：forEach利用伪数组特性、构造函数继承、原型链继承以及构造函数与原型链的组合继承，每种方法都附带了示例代码和可能遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、类的声明

function Animal(){
this.name="name"
}
//es6
class  Animal2{
constructor(){
this.name="name"
}
}

实例化一个类

  new Animal（）

二、JS有哪些手段可以实现继承？
es5
1.forEach 因为对象属性是伪数组

  function Parent(name){
  	this.name=name
  }
  function Child(name){
	var parent=new Parent();
	for(var i in parent) {
		Child.prototype[i]=parent[i]
   }	
  }

2.借助构造函数来实现类的继承（无法继承原型对象上的属性）。

function Parent1() {
	this.name="parent1"
}
function Child1(){
	Parent1.call(this)
	this.type="child1"
}

用到函数的两个方法call和apply
Parent1.call(this)
1、执行了Parent1()方法
2、改变了this指向 (child1对象)

缺点：部分继承，只能继承父类构造函数中的属性和方法，原型对象上的属性和方法无法继承。

在这里插入图片描述

function Parent1() {
	this.name="parent1"
}
Parent1.prototype.say=function(){};
function Child1(){
	Parent1.call(this)
	this.type="child1"
}

在这里插入图片描述
3.借助原型链来实现继承

function Parent2(){
	this.name="parent2"
}
function Child2(){
	this.type="child2"
}
Child2.prototype=new Parent2();

在这里插入图片描述
缺点：子构造函数new出来的对象的原型是一样的，导致修改从原型对象继承而来的属性或者方法在一个子对象中被修改时会影响到其他子对象，这是我们不需要的。

function Parent2(){
	this.name="parent2"
	this.arr=[1,2,3]
}
function Child2(){
	this.type="child2"
}
Child2.prototype=new Parent2();
var child1=new Child2();
var child2=new Child2()
child1.arr.push(4);
console.log(child1.arr)
console.log(child2.arr)

在这里插入图片描述
4.构造函数与原型链组合实现继承

    function Parent3(){
    	this.name="parent3"
    	this.arr=[1,2,3]
    }
    function Child3(){
     	Parent3.call(this)
    	this.type="child3"
    }
    Child3.prototype=new Parent3() //缺点 父类的构造函数运行了两次 优化如下
    Child3.prototype=Parent3.prototype
    var child1=new Child3()
    var child2=new Child3()
    child1.arr.push(4)
    console.log(child1.arr)
    console.log(child2.arr)

在这里插入图片描述
优化后出现问题
child1 instanceof Child3 为true
child1 instanceof Parent4 为true

   function Parent3(){
    this.name="parent3"
    this.arr=[1,2,3]
    }
    function Child3(){
     Parent3.call(this)
    this.type="child3"
    }
    Child3.prototype=new Parent3() //缺点 父类的构造函数运行了两次 优化如下
    Child3.prototype=Parent3.prototype
    var child1=new Child3()
    var child2=new Child3()
    child1.arr.push(4)
    console.log(child1.arr)
    console.log(child2.arr)
    console.log(  child1 instanceof  Child3)
     console.log(  child1 instanceof  Child3)
     console.log(child1.constructor)

在这里插入图片描述
最优方案

        function Parent3(){
        	this.name="parent3"
        	this.arr=[1,2,3]
        }
        function Child3(){
         	Parent3.call(this)
       	    this.type="child3"
        }
        Child3.prototype=new Parent3() //缺点 父类的构造函数运行了两次 优化如下
        Child3.prototype= Object.create(Parent3.prototype)
        Child3.prototype.constructor=Child3
        var child1=new Child3()
        var child2=new Child3()
        child1.arr.push(4)
        console.log(child1.arr)
        console.log(child2.arr)
        console.log(child1 instanceof  Child3)
        console.log(child1 instanceof  Child3)
        console.log(child1.constructor)

在这里插入图片描述