FED实验室 - 专注WEB端开发和用户体验

使用Object.create()实现继承

点滴Javascript 煦涵 3914℃ 0评论

一、常见继承方式

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

Child.prototype = new Parent();

2、借用构造函数:

function Child(a, b, c, d) {
	Parent.apply(this, arguments);
}

3、借用和设置原型:

function Child(a, b, c, d) {
	Parent.apply(this, arguments);
}
Child.prototype = new Parent();

4、共享原型:

Child.prototype = Parent.prototype;

5、使用临时构造函数:

var Proxy = function() {};
Proxy.prototype = Parent.prototype;
Child.prototype = new Proxy();

6、extend属性复制:

function extend(parent, child) {
	child = child || {};

	for(var key in parent) {
		if(parent.hasOwnProperty(key)) {
			child[key] = parent[key];
		}
	}

	return child;
}

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

Object.create(Parent);

二、Object.create实现继承

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

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());

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

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()方法实现了链式继承,及原型链的继承。如果在控制台打印出各个生成的对象,可以很清楚的看到。

//Outputs: true
console.log(Child.isPrototypeOf(SubChild));
//Outputs: true
console.log(Parent.isPrototypeOf(Child));

isPrototypeOf() 方法测试一个对象是否存在于另一个对象的原型链上。

以上就是本文对Object.create方法的描述,文中不妥之处,还望批评指正。

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (0)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽