使用Object.create()实现继承 用 Object.create实现类式继承

使用Object.create()实现继承:https://www.cnblogs.com/cuew1987/p/4075027.html

用 Object.create实现类式继承:https://www.jianshu.com/p/561432a109d6

一、常见继承方式

我们日常开发中常见的继承方式主要有: 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方法的描述,文中不妥之处,还望批评指正。

猜你喜欢

转载自www.cnblogs.com/bydzhangxiaowei/p/11566657.html