为什么需要原型及原型链?
对于同一个函数,我们通过 new
生成出来的实例,都会开出新的一块堆区,所以下面代码中 person 1
和person 2
的eat()
是不同的(造成内存不足)。
所以,建个类似于共享库的对象,这样就可以在需要的时候,调用一个类似共享库的对象(社区),让实例能够沿着某个线索去找到自己归处。
function Person(name, age) {
this.name = name;
this.age = age;
this.eat = function() {
console.log(age + "岁的" + name + "在吃饭。");
}
}
let p1 = new Person("jsliang", 24);
let p2 = new Person("jsliang", 24);
console.log(p1.eat === p2.eat); // false
2
3
4
5
6
7
8
9
10
11
12
# 1. 原型与原型链
原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承。
在JavaScript中,我们创建一个函数A(就是声明一个函数A), 那么浏览器就会在内存中创建一个对象B,而且每个函数都默认会有一个属性 prototype
指向了这个对象 ( 即:prototype
的属性的值是这个对象 ) 。这个对象B就是函数A的原型对象,简称函数的原型。这个原型对象B 默认会有一个属性 constructor
指向了这个函数A ( 意思就是说:constructor
属性的值是函数A )。
下面的图描述了声明一个函数之后发生的事情:
看下面的代码:
<body>
<script type="text/javascript">
/*
声明一个函数,则这个函数默认会有一个属性叫 prototype 。
而且浏览器会自动按照一定的规则,创建一个对象,这个对象就是这个函数的原型对象,prototype属性指向这个原型对象。
这个原型对象有一个属性叫constructor 执行了这个函数
注意:原型对象默认只有属性:constructor。其他都是从Object继承而来,暂且不用考虑。
*/
function Person() {}
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
当把一个函数作为构造函数 (理论上任何函数都可以作为构造函数) 使用new
创建对象的时候,那么这个对象就会存在一个默认的不可见的属性,来指向了构造函数的原型对象。 这个不可见的属性我们一般用[[prototype]]
或者__proto_
来表示,只是这个属性没有办法直接访问到。
看下面的代码:
<body>
<script type="text/javascript">
function Person () {}
/*
利用构造函数创建一个对象,则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
指向了构造函数的原型对象。
*/
var p1 = new Person();
</script>
</body>
2
3
4
5
6
7
8
9
10
- 创建
p1
对象虽然使用的是Person构造函数
,但是对象创建出来之后,这个p1
对象其实已经与Person构造函数
没有任何关系了,p1
对象的[[ prototype ]]
属性指向的是Person构造函数
的原型对象。 - 如果使用
new Person()
创建多个对象,则多个对象都会同时指向Person构造函数
的原型对象。 - 可以手动给这个原型对象添加属性和方法,那么
p1,p2,p3…
这些对象就会共享这些在原型中添加的属性和方法。 - 如果我们访问
p1
中的一个属性name
,如果在p1
对象中找到,则直接返回。如果p1
对象中没有找到,则直接去p1
对象的[[prototype]]
属性指向的原型对象中查找,如果查找到则返回。如果原型中也没有找到,则继续向上找原型的原型——原型链。 - 如果通过
p1
对象添加了一个属性name
,则p1
对象来说就屏蔽了原型中的属性name
。 换句话说:在p1
中就没有办法访问到原型的属性name
了。 - 通过
p1
对象只能读取原型中的属性name
的值,而不能修改原型中的属性name
的值。p1.name = “李四”
并不是修改了原型中的值,而是在p1
对象中给添加了一个属性name
。
function Person() {}
// 可以使用Person.prototype 直接访问到原型对象
// 给Person函数的原型对象中添加一个属性 name并且值是 "张三"
Person.prototype.name = "张三";
Person.prototype.age = 20;
var p1 = new Person();
/*
访问p1对象的属性name,虽然在p1对象中我们并没有明确的添加属性name
但是p1的 [[prototype]] 属性指向的原型中有name属性,所以这个地方可以访问到属性name就值。
注意:这个时候不能通过p1对象删除name属性,因为只能删除在p1中的对象。
*/
console.log(p1.name); // 张三
var p2 = new Person();
console.log(p2.name); // 张三 都是从原型中找到的,所以一样。
console.log(p1.name === p2.name); // true
// 由于不能修改原型中的值,则这种方法就直接在p1中添加了一个新的属性name,然后在p1中无法再访问到
//原型中的属性。
p1.name = "李四";
console.log("p1:" + p1.name); //p1:李四
// 由于p2中没有name属性,则对p2来说仍然是访问的原型中的属性。
console.log("p2:" + p2.name); //p2:张三
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
# 2. 相关属性和方法
引用类型的四个规则:
1、引用类型,都具有对象特性,即可自由扩展属性。
2、引用类型,都有一个隐式原型 __proto__
属性,属性值是一个普通的对象。
3、引用类型,隐式原型 __proto__
的属性值指向它的构造函数的显式原型 prototype
属性值。
4、当你试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么它会去它的隐式原型 __proto__
(也就是它的构造函数的显式原型 prototype
)中寻找。
引用类型:Object、Array、Function、Date、RegExp。这里且称 proto 为隐式原型
所有构造函数都是
Function
的实例,所有原型对象都是Object的实例除了Object.prototype
# 2.1 prototype属性
prototype
存在于构造函数中 (其实任意函数中都有,只是不是构造函数的时候prototype
我们不关注而已) ,他指向了这个构造函数的原型对象。
参考前面的示意图。
# 2.2 constructor属性
constructor
属性存在于原型对象中,他指向了构造函数。
看下面的代码:
<script type="text/javascript">
function Person () {
}
alert(Person.prototype.constructor === Person); // true
var p1 = new Person();
//使用instanceof 操作符可以判断一个对象的类型。
//typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof,因为引用类型用typeof 总是返回object。
alert(p1 instanceof Person); // true
</script>
2
3
4
5
6
7
8
9
我们根据需要,可以Person.prototype
属性指定新的对象,来作为Person
的原型对象。
但是这个时候有个问题,新的对象的constructor
属性则不再指向Person
构造函数了。
看下面的代码:
<script type="text/javascript">
function Person () {
}
//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
Person.prototype = {
name:"志玲",
age:20
};
var p1 = new Person();
alert(p1.name); // 志玲
alert(p1 instanceof Person); // true
alert(Person.prototype.constructor === Person); //false
//如果constructor对你很重要,你应该在Person.prototype中添加一行这样的代码:
/*
Person.prototype = {
constructor : Person //让constructor重新指向Person函数
}
*/
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 2.3 _ _ proto_ _ 属性
用构造方法创建一个新的对象之后,这个对象中默认会有一个不可访问的属性 [[prototype]]
, 这个属性就指向了构造方法的原型对象。
但是在个别浏览器中,也提供了对这个属性[[prototype]]
的访问(chrome
浏览器和火狐浏览器。ie
浏览器不支持)。访问方式:p1.__proto__
但是开发者尽量不要用这种方式去访问,因为操作不慎会改变这个对象的继承原型链。
<script type="text/javascript">
function Person () {
}
//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
Person.prototype = {
constructor : Person,
name:"志玲",
age:20
};
var p1 = new Person();
alert(p1.__proto__ === Person.prototype); //true
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 2.4 hasOwnProperty() 方法
用去访问一个对象的属性的时候,这个属性既有可能来自对象本身,也有可能来自这个对象的[[prototype]]
属性指向的原型。
那么如何判断这个对象的来源呢?
hasOwnProperty方法,可以判断一个属性是否来自对象本身。
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
//sex属性是直接在p1属性中添加,所以是true
alert("sex属性是对象本身的:" + p1.hasOwnProperty("sex"));
// name属性是在原型中添加的,所以是false
alert("name属性是对象本身的:" + p1.hasOwnProperty("name"));
// age 属性不存在,所以也是false
alert("age属性是存在于对象本身:" + p1.hasOwnProperty("age"));
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
所以,通过hasOwnProperty
这个方法可以判断一个对象是否在对象本身添加的,但是不能判断是否存在于原型中,因为有可能这个属性不存在。
也即是说,在原型中的属性和不存在的属性都会返回fasle。
如何判断一个属性是否存在于原型中呢?
# 2.5 in 操作符
in
操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候,现在对象本身中找,如果对象找不到再去原型中找。换句话说,只要对象和原型中有一个地方存在这个属性,就返回true
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
alert("sex" in p1); // 对象本身添加的,所以true
alert("name" in p1); //原型中存在,所以true
alert("age" in p1); //对象和原型中都不存在,所以false
</script>
2
3
4
5
6
7
8
9
10
11
12
回到前面的问题,如果判断一个属性是否存在于原型中:
如果一个属性存在,但是没有在对象本身中,则一定存在于原型中。
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
//定义一个函数去判断原型所在的位置
function propertyLocation(obj, prop){
if(!(prop in obj)){
alert(prop + "属性不存在");
}else if(obj.hasOwnProperty(prop)){
alert(prop + "属性存在于对象中");
}else {
alert(prop + "对象存在于原型中");
}
}
propertyLocation(p1, "age");
propertyLocation(p1, "name");
propertyLocation(p1, "sex");
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21