0%

JavaScript中的对象、继承及原型链学习

以前写JavaScript都是实现一些前后端的交互功能,原型链也只是做题的时候遇到了一些。很少用到JavaScript中的对象和继承,这两天学习一下。

对象

在JavaScript中创建一个空对象只需通过以下语句:

1
var person = {};

如果是一个稍微复杂点的对象:

1
2
3
4
5
6
7
8
9
10
11
12
var person = {
name : ['Bob', 'Smith'],
age : 32,
gender : 'male',
interests : ['music', 'skiing'],
bio : function() {
alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
},
greeting: function() {
alert('Hi! I\'m ' + this.name[0] + '.');
}
};

在console中输入person;得到以下结果:

1
2
3
4
5
6
7
age: 32
bio: ƒ ()
gender: "male"
greeting: ƒ ()
interests: (2) ["music", "skiing"]
name: (2) ["Bob", "Smith"]
[[Prototype]]: Object

可以看出无论是对象还是函数都是该对象的成员,末尾处还有一个Prototype,这是该对象的原型,在后面会提到。

接着来看一下JavaScript如何创建类,也就是如何构建一个对象模板。JavaScript中通过构建函数来构建一个对象模板。

1
2
3
4
5
6
7
function Person(name) {
this.name = name;
this.greeting = function() {
alert('Hi! I\'m ' + this.name + '.');
};
}
var person1 = new Person('Bob');

如此便可以创建一个对象并实例化。

原型

JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

当访问JavaScript对象obj的一个属性时,浏览器首先查找该对象本身是否有这个属性。如果obj没有这个属性, 然后浏览器就会在 obj__proto__ 中查找这个属性(也就是 obj.prototype)。如果 doSomeInstancing 的 __proto__ 没有这个属性, 浏览器就会去查找 obj__proto____proto__ ,看它是否有这个属性。如果所有的__proto__ 都找完了,就会声明该属性是undefined

原型链中的方法和属性没有被复制到其他对象——它们被访问需要通过前面所说的“原型链”的方式。

实际上prototype属性就是一个对象定义其继承的属性和方法的地方。

参考资料:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript