原型是什么?
是一个对象,prototype称为原型对象。
每一个构造函数都有一个prototype 属性,这个属性指向的是一个对象,即prototype就是一个对象,并且这个原型对象的所有属性和方法都会被构造函数所拥有。
原型的作用是什么?
共享方法。
我们可以把一些不变得方法,直接定义在prototype对象上,这样所有的对象的实例就可以共享这些方法。
一般把公共属性定义到构造函数里面,公共的方法放到原型对象身上。
代码讲解
原型
// 构造函数
function Person(name,age){
this.name = name;
this.age = age;
}
// prototype 属性
// 每个构造函数都有一个属性prototype,这个属性指向的是一个对象,即prototype就是一个对象,称为:原型对象。并且这个原型对象的所有属性和方法都会被构造函数所拥有。
// 在构造函数的原型对象上添加myIntroduce方法
Person.prototype.myIntroduce = function(){
console.log(`我是${this.name},今年${this.age}岁了!`);
}
var zs = new Person('张三', 20)
console.log("zs:", zs);
// __proto__ 属性
// 虽然打印zs这个对象中的构造函数中没有这个方法,但是有一个__proto__属性,
// __proto__属性是每个对象都有的属性,属于隐式原型,称为:对象的原型。指向的是构造函数的prototype对象,即 对象.__proto__ === 类.prototype
zs.myIntroduce();
console.log(zs.__proto__ === Person.prototype) // true
// constructor属性
// 用这个属性指回原来的构造函数
console.log(zs.__proto__.constructor);
console.log(Person.prototype.constructor);
原型链
// 原型链
console.log("这是zs :", zs)
console.log(zs.__proto__ === Person.prototype); //
console.log("这是Person.prototype : ", Person.prototype); // 只要是对象就有__proto__原型
console.log("这是Person.prototype.__proto__ : ", Person.prototype.__proto__);
console.log("这是Object.prototype: ", Object.prototype);
console.log(Person.prototype.__proto__ === Object.prototype); // 构造函数的原型对象的属性__proto__指向的就是Object.prototype
下面这张图表示:zs.__proto__ === Person.prototype
下面这张图表示:Person.prototype.__proto__ === Object.prototype
图形理解
prototype 和 __proto__的关系
原型链