什么是原型
Father.prototype 就是原型英文名称,它是一个对象,也称它为原型对象。
原型的作用
原型的作用就是共享方法,通过Father.prototype.method,不会反应开辟空间储存方法。
原型的中的this指向
原形中的this指向是实例。
原型链
什么是原型链原型与原型层相连的过程叫原型链。
原型链的应用
对象可以使用prototype原型对象的使用属性和方法,因为对象有_proto_原型的存在每个对象。
function Star(name,age) {
this.name = name;
this.age = age;
}
Star.prototype.dance = function(){
console.log('我在跑步',this.name);
};
let obj = new Star('cy',20);
console.log(obj.__proto__ === Star.prototype);//true
原型链图
原型的查找方式
如:查找obj的dance方法 function Star(name) { this.name = name;
(1)首先看obj对象身上是否有dance方法,如果有,则执行对象身上的方法
this.dance = function () {
console.log(this.name + '1');
}
}
(2)如果没有dance方法,就去构造函数原型对象prototype身上去查找dance这个方法。
Star.prototype.dance = function () {
console.log(this.name + '2');
};
(3)如果再没有dance方法,就去Object原型对象prototype身上去查找dance这个方法。
Object.prototype.dance = function () {
console.log(this.name + '3');
};
(4)如果再没有,则会报错。
let obj = new Star('小红');
obj.dance();
- 首先看obj对象身上是否有dance方法,如果有,则执行对象身上的方法。
- 如果没有dance方法,就去构造函数原型对象prototype身上去查找dance这个方法。
- 如果还没有dance方法,就去object原型对象prototype身上去查找dance这个方法.
- 如果继续没有,依旧没找到,就会报错.
原型的构造器
原型的构造器指向构造函数。
function Star(name) {
this.name = name;
}
let obj = new Star('小红');
console.log(Star.prototype.constructor === Star);//true
console.log(obj.__proto__.constructor === Star); //true
原型上添加方法需要注意的点
方法1:构造函数.prototype.方法在原型对象上直接添加方法此时的原型对象有constructor构造器,构造器指向函数本身。
function Star(name) {
this.name = name;
}
Star.prototype.dance = function () {
console.log(this.name);
};
let obj = new Star('小红');
console.log(obj.__proto__); //{dance: ƒ, constructor: ƒ}
console.log(obj.__proto__.constructor); // Star
方法2:Star.prototype = {}给原形重新赋值,此时会丢失构造器需要手动构造器,并指回构造函数本身
function Star(name) {
this.name = name;
}
Star.prototype = {
dance: function () {
console.log(this.name);
}
};
let obj = new Star('小红');
console.log(obj.__proto__); //{dance: ƒ}
console.log(obj.__proto__.constructor); // ƒ Object() { [native code] }
Star.prototype.constructor = Star;
一般不允许直接改变原型prototype指向
改变原型指向会是原来的方法找不到,所以Array、String,这些内置的方法不允许改变原型指向的,如果改变就是报错。
Array.prototype.getSum = function (arr) {
let sum = 0;
for (let i = 0; i < this.length; ++i) {
sum += this[i];
}
return sum;
};
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.getSum());//45
如果改变prototype指向,会报错!
Array.prototype = {
getSum: function (arr) {
let sum = 0;
for (let i = 0; i < this.length; ++i) {
sum += this[i];
}
return sum;
}
};
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.getSum());//45