JavaScript 原型
本文讲介绍JavaScript原型 以及JavaScript的原型链
JS中的原型和原型链
所有的引用类型(数组、函数、对象)可以自由扩展属性(除null以外)
所有的函数都有一个prototype属性(显式原型)
所有的引用类型都有一个__proto__属性(隐式原型)
所有引用类型 它的__proto__属性指向它的构造函数的 prototype属性
当试图得到一个对象的属性时 如果这个对象不存在这个属性,那么就会去它的 __ proto__的路线去查找 也就是构造函数中的 prototype 中去查找
一、原型的使用和原型的概念
1.显式原型 prototype
在我们创建一个函数的时候 每个函数都会有一个prototype(原型)属性 这个属性指向一个对象,这个对象包含着可以实例共享的属性和方法 你可以不必再构造函数中定义对象的实例信息 而直接将这些信息直接添加到原型对象中
// ↓ -------- 创建一个构造函数 --------
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.sex = "man"
// ↓ -------- 在原型中添加一条方法 ---------
Person.prototype.seyLove = function () {
console.log(name +" love 1024")
};
// ↓ -------- 实例化这个对象 ----------
var man = new Person("伊凡ED",20);
console.log(man)
console.log(man.name+" sex="+man.sex);
Person.prototype.seyLove()
// - ↑ 输出结果 = Person {name: "伊凡ED", age: 20}
// 伊凡FD sex=man
// love 1024
如果我们再构造函数内定义好这个seyLove方法的话 那么我们用这个构造函数构造的每一个对象里都会拥有seyLove这个方法 这样我们就浪费了很多的资源 我们完全可以给需要用到的对象添加需要的方法 那么 我们就可以用原型方法 并且这个方法可以继承 需要了解继承可以在我的博客搜索 JavaScript 继承
2.隐式原型(原型对象)__proto__
JavaScript中的所有对象(除了null)都具有的一个属性 __proto__ 所有的__proto__都是指向它的构造函数的 prototype 属性 下面的例子最后一行也向我们证明了这一点
// ↓ -------- 创建一个构造函数 --------
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.sex = "man"
// ↓ -------- 在原型中添加一条方法 ---------
Person.prototype.seyLove = function () {
console.log(name +" love 1024")
};
// ↓ -------- 实例化这个对象 ----------
var man = new Person("伊凡ED",20);
console.log(man)
console.log(man.name+" sex="+man.sex);
Person.prototype.seyLove()
console.log(man.__proto__)
console.log(Person.prototype)
console.log(man.__proto__===Person.prototype)
// - ↑ 上面的代码输出 :Person {name: "伊凡FD", age: 20}
// 伊凡ED sex=man
// love 1024
// {sex: "man", seyLove: ƒ, constructor: ƒ}
// {sex: "man", seyLove: ƒ, constructor: ƒ}
// true
我们接着用一张图清楚的标明他的指向
3.Object
既然 刚才说所有的对象 都有一个__proto__属性 那么我们原型的__proto__指向哪里呢
// ↓ -------- 创建一个构造函数 --------
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.sex = "man"
// ↓ -------- 在原型中添加一条方法 ---------
Person.prototype.seyLove = function () {
console.log(name +" love 1024")
};
// ↓ -------- 实例化这个对象 ----------
var man = new Person("伊凡FD",20);
console.log(man.__proto__.__proto__)
// - ↑ 上面的输出:
/* constructor: ƒ Object()
* hasOwnProperty: ƒ hasOwnProperty()
* isPrototypeOf: ƒ isPrototypeOf()
* propertyIsEnumerable: ƒ propertyIsEnumerable()
* toLocaleString: ƒ toLocaleString()
* toString: ƒ toString()
* valueOf: ƒ valueOf()
* __defineGetter__: ƒ __defineGetter__()
* __defineSetter__: ƒ __defineSetter__()
* __lookupGetter__: ƒ __lookupGetter__()
* __lookupSetter__: ƒ __lookupSetter__()
* get __proto__: ƒ __proto__()
* set __proto__: ƒ __proto__()
* */
得到的结果看着还很长 我们顺着这条线 来到了Object构造函数的原型
4.null
这次我们打印Object.prototype的__proto__ 输出为null (万物皆对象 对象皆为空)
// ↓ -------- 创建一个构造函数 --------
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.sex = "man"
// ↓ -------- 在原型中添加一条方法 ---------
Person.prototype.seyLove = function () {
console.log(name +" love 1024")
};
// ↓ -------- 实例化这个对象 ----------
var man = new Person("伊凡FD",20);
console.log(man.__proto__.__proto__.__proto__)
// - ↑ 上面的输出:null
5.原型的查找属性
现在我可以解释一下 原型的查找属性 根据上面的__proto__ 如果在一个对象中查找某个属性 未查找到 则会顺着__proto__的路线向上查找 也就是 先去查找显性原型中有没有该属性 如果没有 他就会沿着__proto__的路线一直向上找 也就是他会根据构造安徽函数的原型去查找 如果都没又找到 最后只能输出null 万物皆为空
6.constructor
以上的指针指向的都是原型 刚才也说了每一个对象都有一个__proto__ 每一个__proto__ 都指向的是原型 而每一个原型 都又一个关联的构造函数 而constructor 就是指向这个函数的
// ↓ -------- 创建一个构造函数 --------
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.sex = "man"
// ↓ -------- 在原型中添加一条方法 ---------
Person.prototype.seyLove = function () {
console.log(name +" love 1024")
};
// ↓ -------- 实例化这个对象 ----------
var man = new Person("伊凡ED",20);
console.log(man.__proto__.constructor );
console.log(man.__proto__.constructor.prototype );
console.log(man.__proto__.__proto__.constructor );
console.log(man.__proto__.__proto__.constructor.prototype );
// - ↑ 输出结果:
/* ƒ Person(name,age) {
* this.name = name;
* this.age = age;
* }
* {sex: "man", seyLove: ƒ, constructor: ƒ}
* ƒ Object() { [native code] }
* {constructor: ƒ, __defineGetter__: ƒ,
* __defineSetter__: ƒ,
* hasOwnProperty: ƒ,
* __lookupGetter__: ƒ,
* …}
* */
情况如下图:
我们在使用原型的时候 一般将需要扩展的方法写在构造函数的prototype属性中 避免写在__proto__属性里面。