使用Object.create()实现继承

一、常见继承方式

我们日常开发中常见的继承方式主要有: 1、默认模式:

1

Child.prototype = new Parent();

2、借用构造函数:

1

2

3

function Child(a, b, c, d) {

    Parent.apply(this, arguments);

}

3、借用和设置原型:

1

2

3

4

function Child(a, b, c, d) {

    Parent.apply(this, arguments);

}

Child.prototype = new Parent();

4、共享原型:

1

Child.prototype = Parent.prototype;

5、使用临时构造函数:

1

2

3

var Proxy = function() {};

Proxy.prototype = Parent.prototype;

Child.prototype = new Proxy();

6、extend属性复制:

1

2

3

4

5

6

7

8

9

10

11

function extend(parent, child) {

    child = child || {};

 

    for(var key in parent) {

        if(parent.hasOwnProperty(key)) {

            child[key] = parent[key];

        }

    }

 

    return child;

}

当然在一些javascript库中(jQuery),还存在浅复制和深复制。 7、原型继承模式:

1

Object.create(Parent);

二、Object.create实现继承

本文将来学习第七种继承方式Object.create()方法来实现继承,关于此方法的详细描述,请戳这里。下面来通过几个实例来学习该方法的使用:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var Parent = {

    getName: function() {

        return this.name;

    }

}

 

var child = Object.create(Parent, {

    name: { value: "Benjamin"},

    url : { value: "http://www.zuojj.com"}

});

 

//Outputs: Object {name: "Benjamin", url: "http://www.zuojj.com", getName: function}

console.log(child);

 

//Outputs: Benjamin

console.log(child.getName());

我们再来看一个例子,再添加一个继承:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

var Parent = {

    getName: function() {

        return this.name;

    },

    getSex: function() {

        return this.sex;

    }

}

 

var Child = Object.create(Parent, {

    name: { value: "Benjamin"},

    url : { value: "http://www.zuojj.com"}

});

 

var SubChild = Object.create(Child, {

    name: {value: "zuojj"},

    sex : {value: "male"}

})

 

//Outputs: http://wwww.zuojj.com

console.log(SubChild.url);

 

//Outputs: zuojj

console.log(SubChild.getName());

 

//Outputs: undefined

console.log(Child.sex);

 

//Outputs: Benjamin

console.log(Child.getName());

通过上面可以看出Object.create()方法实现了链式继承,及原型链的继承。如果在控制台打印出各个生成的对象,可以很清楚的看到。

1

2

3

4

//Outputs: true

console.log(Child.isPrototypeOf(SubChild));

//Outputs: true

console.log(Parent.isPrototypeOf(Child));

isPrototypeOf() 方法测试一个对象是否存在于另一个对象的原型链上。 以上就是本文对Object.create方法的描述,文中不妥之处,还望批评指正。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: `Object.create` 是 JavaScript 中一个用于创建对象的方法。它可以在一个已有的对象上创建一个新的对象,新对象将该已有对象作为其原型。 例如: ``` const obj = { sayHello: function() { console.log("Hello"); } }; const newObj = Object.create(obj); newObj.sayHello(); // 输出 "Hello" ``` 在上面的例子中,`newObj` 对象是通过 `Object.create` 方法从 `obj` 对象创建出来的,并且它继承了 `obj` 对象的所有方法。 ### 回答2: object.create()是JavaScript中的一个方法,用于创建一个新对象,以指定的原型对象作为新对象的原型。这个方法可以接受两个参数,第一个参数是新对象的原型,第二个参数可选,用于进一步定义新对象的属性。 使用object.create()方法可以实现面向对象编程中的继承和原型链的概念。通过指定一个对象作为新对象的原型,新对象就可以从原型对象继承属性和方法。这种继承的方式称为原型继承。 示例代码如下: ``` const person = { name: 'Alice', sayHello: function() { console.log('Hello, my name is ' + this.name); } }; const newPerson = Object.create(person); newPerson.name = 'Bob'; newPerson.sayHello(); // 输出:Hello, my name is Bob ``` 在这个示例中,我们首先创建了一个名为person的对象,它有一个属性name和一个方法sayHello()。然后我们使用object.create()方法,以person为原型创建了一个新对象newPerson。接着我们给newPerson对象的name属性赋值为'Bob',并调用sayHello()方法,输出了'Hello, my name is Bob'。 通过object.create()方法,我们可以实现对象之间的继承,并且可以在新对象上添加或修改属性,而不会影响到原型对象。这种方式更加灵活和可扩展,可以实现更复杂的对象关系和继承结构。 ### 回答3: object.create是JavaScript中一个用于创建新对象的方法。它接收一个参数,该参数被用作新对象的原型。 使用object.create方法,我们可以通过一个现有对象来创建一个新对象,新对象继承了现有对象的属性和方法。这样,我们可以利用已有的对象作为新对象的模板,快速创建一个具备相似行为和属性的对象。 object.create实现了原型继承的一种方式,它与传统的构造函数方式不同,不需要借助构造函数和原型链。通过指定原型对象,object.create方法直接创建出具有该原型对象作为原型的新对象。 这种创建对象的方式非常灵活,因为我们可以通过修改原型对象,动态地添加、修改或删除新对象的属性和方法。这使得我们可以轻松地调整新对象的功能和行为。 object.create方法还可以接收一个可选的第二个参数,用于进一步定义新对象的属性和特性。该参数是一个包含属性描述符的对象。我们可以在这个参数中指定属性的值、可写性、可枚举性和可配置性等。 总之,object.create是一种非常有用的方法,它提供了一种简单而灵活的方式来创建新对象,并且可以通过修改原型对象来动态地调整新对象的功能和行为。这对于构建复杂的对象结构、实现继承和创建新的原型对象非常有帮助。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值