原型和原型链

原型和原型链

原型

在 JavaScript 中,函数(function)是允许拥有属性的。所有的函数会有一个特别的属性 —— prototype,这个属性就是原型,它是一个对象。

原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中

1
2
3
4
5
6
7
8
9
10
11
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
return this.name;
}
}
var timbok = new Person('timbok', 18);
var lucy = new Person('lucy', 20);

console.log(timbok.sayName === lucy.sayName); // false

可以看到,对于同一个函数,我们通过 new 生成出来的实例,都会开出新的一块堆区,所以上面代码中 timbok 和 lucy的sayName不相等。

当使用prototype

1
2
3
4
5
6
7
Person.prototype.eat = function() {
console.log('吃');
}
var timbok = new Person('timbok', 18);
var lucy = new Person('lucy', 20);

console.log(timbok.eat === lucy.eat); // true

原型链

在JavaScript中万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条,专业术语称之为原型链。

1
2
3
Person.prototype.constructor === Person // true

Person.prototype === timbok.__proto__ // true

当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型,Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回undefined。

1
2
3
4
5
6
Person.prototype.a = 123;

var person = new Person()

console.log(person.a) // 123
console.log(person.b) // undefined

person.a:

先在person对象里找a -> 没找到会再到person.__proto__,也就是 Person.prototype内找 -> 找到了

person.b:

先在person对象里找b -> 没找到会再到person.__proto__内找 -> 查找与对象关联的原型中的属性 -> 找原型的原型,一直找到最顶层Object为止 -> 找不到就undefined

衍生扩展-new操作符

要想弄懂new,得先了解一下何为构造函数

构造函数

构造函数与其他函数的唯一区别,就在于调用它们的方式不同。不过,构造函数毕竟也是函数,不存在定义构造函数的特殊语法。任何函数,只要通过 new 操作符来调用,那它就可以作为构造函数

用以下的例子来模仿 var person = new Person() 的过程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 1. 需要一个创造器
function Creator() {
this.name='creator'
console.log("创造器");
}

// 2. 新建变量,开辟内存
var person = {};

// 3. 通过 __proto__ 指向Creator的原型
person.__proto__ = Creator.prototype

// 4. call person 使其可以扩展name
Creator.call(person) // 创造器

// 5.在原型上增加方法
Creator.prototype.action = function() {
console.log('创造动作')
}

person.action() // 创造动作
console.log(person) // Creator {name: 1}

关于 this、apply、call、bind 可以看这篇文章。

写在最后

个人总结,如有不正确,欢迎指正!

Copyright © 2017 - 2020 Timbok's Blog All Rights Reserved.

访客数 : | 访问量 :