为什么需要原型原型链?
function Person(name, age) {
this.name = name;
this.age = age;
this.eat = function() {
console.log(age + "岁的" + name + "在吃饭。");
}
}
let p1 = new Person("xiaohong", 24);
let p2 = new Person("xiaohong", 24);
console.log(p1.eat === p2.eat); // false
可以看到,对于同一个函数,我们通过 new 生成出来的实例,都会开出新的一块堆区,所以上面代码中 person 1 和 person 2 的吃饭是不同的。
拥有属于自己的东西(例如房子、汽车),这样很好。但它也有不好,毕竟总共就那么点地儿(内存),你不停地建房子,到最后是不是没有空地了?(内存不足)
所以,咱要想个法子,建个类似于共享库的对象(例如把楼房建高),这样就可以在需要的时候,调用一个类似共享库的对象(社区),让实例能够沿着某个线索去找到自己归处。
而这个线索,在前端中就是原型链 prototype。
function Person(name) {
this.name = name;
}
// 通过构造函数的 Person 的 prototype 属性找到 Person 的原型对象
Person.prototype.eat = function() {
console.log("吃饭");
}
let p1 = new Person("jsliang", 24);
let p2 = new Person("梁峻荣", 24);
console.log(p1.eat === p2.eat); // true
这样我们就通过分享的形式,让这两个实例对象指向相同的位置了。
原型
首先清楚两个概念:
- 引用类型,都具有对象特性,即可自由扩展属性。(引用类型:Object、Array、Function、Date、RegExp)
- 每个函数
function
都有一个显示原型prototype
,每个实例对象都有一个隐式原型__proto__
function Fn() { // 内部语句:this.prototype = {}
}
// 1、每个函数function都有一个prototype,即显示原型(属性)
console.log(Fn.prototype);
// 2、每个实例对象都有一个__proto__,可称为隐式原型(属性)
var fn = new Fn(); // 内部语句: this.__proto__ = Fn.prototype
console.log(fn.__proto__);
两个准则
js
之父在设计js
原型原型链的时候遵循以下两个准则:
**准则一:**原型对象(即Fn.prototype
)的constructor
指向构造函数本身
**准则二:**实例对象(即 fn )的__proto__
指向其构造函数的显示原型
function Fn() {}
var fn = new Fn();
// 原型对象的 constructor 指向构造函数本身
console.log(Fn.prototype.constructor === Fn); // true
// 对象的隐式原型的值为其对应构造函数的显示原型的值
console.log(Fn.prototype === fn.__proto__); // true
理解Function与Object特例
- 每个函数都是
Function
的实例,所以每个函数既有显示原型又有隐式原型,所有函数的隐式原型指向**Function.prototype**
;构造器Function的构造器是它自身
// function Foo() {} 相当于 var Foo = new Function()
// Function = new Function() => Function.__proto__ = Function.prototype
// Object 作为构造函数时,其 __proto__ 内部属性值指向 Function.prototype
// Object.__proto__ = Function.prototype
// Function.constructor=== Function;//true
- Object 构造函数创建一个对象包装器。JavaScript中的所有对象都来自
Objec
,所有对象都是Object的实例;所有对象从Object.prototype
继承方法和属性,尽管它们可能被覆盖。
// Fn的原型对象(Fn.prototype)也来自Object,故Fn.prototype.__proto__ = Object.prototype
function Fn() {}
原型链:
-
读取某个对象的属性时,会自动到原型链中查找。
-
- 现在自身属性中查找,找到返回
- 找不到则继续沿着
__proto__
这条链向上查找,找到返回 - 如果最终没找到,返回
undefined
-
设置对象的属性值时,不会查找原型链,如果当前对象中没有此属性,直接添加此属性并设置其值,
-
方法一般定义在原型中,属性一般通过构造函数定义在对象本身上
原型链就是一个过程,原型是原型链这个过程中的一个单位,贯穿整个原型链
经典面试题
// 测试题1
function A() {
}
A.prototype.n = 1;
var b = new A();
A.prototype = {
n: 2,
m: 3
}
var c = new A();
console.log(b.n, b.m, c.n, c.m);
// 1 undefined 2 3
// 测试题2
var F = function() {
};
Object.prototype.a = function() {
console.log('a()');
};
Function.prototype.b = function() {
console.log('b()');
};
var f = new F();
f.a();
f.b();
F.a();
F.b();
f.a(); // a()
f.b(); // 报错:Uncaught TypeError: f.b is not a function
F.a(); // a()
F.b(); // b()
原型、原型链的意义与适用场景
原型对象的作用,是用来存放实例中共有的那部份属性、方法,可以大大减少内存消耗。