js对象的继承有哪些实现方式归总

最新推荐文章于 2025-02-13 11:17:46 发布

原创最新推荐文章于 2025-02-13 11:17:46 发布 · 345 阅读

1 ·

CC 4.0 BY-SA版权

js原生专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了JavaScript中实现对象继承的八种方法，包括直接指定原型对象、使用Object.create、Object.assign、Object.getOwnPropertyDescriptors、Object.setPrototypeOf、构造函数原型属性、Class继承以及借用构造函数。每种方法都有其特点和适用场景。

实现对象obj继承prot

1 简单粗暴直接指定原型对象的值

const obj={
    _proto_:prot,
    foo:13
}

2 Object.create 创建一个新对象，使用现有的对象来提供新创建的对象的__proto__

const obj=Object.create(prot)
obj.foo=123

3 Object.assign,核心还是create

const obj=Object.assign(Object.create(prot),{foo:123})

4Object.getOwnPropertyDescriptors ，利用create的第二个参数是属性的描述集合

const obj=Object.create(prot,Object.getOwnPropertyDescriptors({
    foo:123
}))

5 Object.setPrototypeOf 设置指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象

const obj=Object.setPrototypeOf({foo:123},prot)

6 设置构造函数的原型属性prototype

function Obj (foo) {
    this.foo = foo
}
Obj.prototype=proto // 指定构造函数的原型
//创建对象
let obj = new Obj('123')

7 Class的继承

class可以通过关键字extends实现继承

class Point{
    constructor(x,y){}
}
class ColorPoint extends Point{
    constructor(x,y,color){
        super(x,y)
        this.color=color
    }
}

    function Person(name,age) {
        this.name=name
        this.age=age
    }
    Person.prototype.id=10
    Person.prototype.sayName=function () {
        alert(this.name)
    }
    function Child(name,age,sex) {
        Person.call(this,name,age)//继承父类的模板
        this.sex=sex
    }

//父类的实例和父类的原型对象的关系
Child.prototype=new Person()