构造函数的原型对象
- 什么是原型对象
- 每个构造函数默认都有一个和它相关联(<->)的对象，这个对象被称为构造函数的原型对象
- 构造函数找到原型对象： prototype
- 原型对象找到构造函数： constructor
- 这个原型对象本身是一个对象，这个对象是 Object 类型，有一个属性（constructor）
- 原型对象的特点
- 构造函数的原型对象上面的属性和方法会被该构造函数创建的所有对象共享
- 如何访问原型对象
- 构造函数.prototype
- 对象.proto(前后各两个下划线)
- Object.getPrototypeOf(对象)
- 如何使用原型对象
- 利用对象的动态特性
- 使用字面量的方式来直接替换
- 约定的说法
- 原型对象|原型|原型属性|构造函数的原型对象|对象的原型对象|对象的原型
- 推荐说法:构造函数的原型对象
- 原型对象 - 构造函数 -对象
function Dog(){
}
//构造函数 Dog
//构造函数的原型对象 Dog.prototype
//原型对象找到构造函数 Dog.prototype.constructor====>Dog
Dog.prototype.name = '默认的名称';
//Dog.prototype = {name:"默认的名称"};
console.log(Dog.prototype);
var dog1 = new Dog();
var dog2 = new Dog();
console.log(dog1.name);
console.log(dog2.name);
console.log(dog1.__proto__ == Dog.prototype);
console.log(Object.getPrototypeOf(dog2) == Dog.prototype);
原型对象解决函数共享问题
- 建议
- 属性写在对象上面
- 方法写在构造函数的原型对象上面
function Person(name){
this.name = name;
}
//设置构造函数的原型对象
Person.prototype.showName = function(){
console.log(this.name);
}
var p1 = new Person('张三');
var p2 = new Person('张三丰');
p1.showName();
p2.showName();
console.log(p1.showName == p2.showName);
//注意：下面的代码在 p1 上面添加了一个 showName 方法并没有修改原型对象
p1.showName = function(){
console.log('测试');
}
p1.showName();
p2.showName();
实例化和实例
- 实例化：
- 使用构造函数创建对象的过程
- 实例（对象）
- 使用构造函数创建出来的对象被称为该构造函数的一个实例对象
- 注意点
我们在说实例对象的时候。需要致命构造函数：某个对象是哪个构造函数的实例对象
function Person(){}
var p1 = new Person();
//p1 是 Person 构造函数的实例对象
原型的使用方法01
- 使用对象的动态特性来设置
- 实例成员：实例对象上面的属性和方法
- 原型成员：构造函数原型对象上面的属性和方法
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.showName = function(){
console.log(this.name);
}
Person.prototype.des = '描述信息';
var p1 = new Person('张三'，20);
console.log(p1);
console.log(Person.prototype);
//删除原型对象上面的属性
//delete Person.prototype.des
//删除成功
console.log(p1.des);
//删除对象中不存在的属性，返回true
//不能使用下面这种方法直接删除原型对象上面的属性
console.log(delete p1.des);
console.log(p1.des;)
原型的使用方法02
- 使用字面量的方式来创建对象替换原型对象
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
showName:function(){
console.log(this.name);
},
showAge:function(){
console.log(this.age);
},
des:'描述信息';
friends:['呜啦呜啦','哗啦哗啦','滴答滴答'];
};
var p1 = new Person('张三',20);
var p2 = new Person('张四',20);
p1.showName();
p2.showName();
//原型成员会被所有的对象（构造函数）共享
//改行代码添加属性在 p1 上面
p1.des = '测试';
console.log(p2.des);
console.log(p1);
console.log(p2);
p1.friends.push('巴拉巴拉');
console.log(p1);
console.log(p2); //会改变
//使用对象.这种方式来设置属性的时候，
//如果这个属性是值类型那么表示添加一个实例属性 des 不会修改原型属性
//如果这个属性是引用类型，那么可以修改到原型属性
Person.prototype.des = '0000';
console.log(p1.des);
console.log(p2.des);
function Person(name,age){
this.name = name;
this.age = age ;
}
//Person.prototype.hi = 'hi';
//var o = {};
//var o = new Object();
//字面量创建的对象是 Object 创建的
// 该对象的构造函数是 Object
//该对象的构造函数也有自己的原型对象 Object,prototype
//该对象的构造函数也有自己的原型对象内部有构造器属性 Object.prototype.constructor===>Object
//对象本身并没有构造器属性，在访问该属性的时候访问的是其原型对象上面的属性
Person.prototype = {
//为了防止实例对象的Person.prototype.constructor 指向 Object 我们在这里重新设置其 constructor 属性
constructor:Person,
showName:function(){
console.log(this.name);
},
showAge:function(){
console.log(this.age);
}
};
var p1 = new Person('张三',20);
console.log(Person.prototype.constructor == Person);
console.log(p1);
使用原型对象的注意事项
- 注意设置原型对象的位置
- 在设置（替换）原型对象前后创建的对象所指向的原型对象并不是同一个
// 1.提供构造函数
function Person(name,age){
this.name = name;
this.age = age;
}
// 3.创建实例对象
var p1 = new Person('张三'.20);
// 2.设置原型对象
Person.prototype = {
constructor:Person,
showName:function(){
console.log(this.name);
}
}
//p1.showName();
var p2 = new Person("李四",20);
p2.showName();
p2.showName();
proto 属性
- 原型的访问
- 构造函数.prototype
- 对象.proto
- Object.getPrototypeOf(对象)
- proto 在正式的开发中不要使用，这个属性并不是 ECMA标准里面的属性，只是部分浏览器厂商提供的一个属性，方便调试的
- ES6 中纳入了标准
hasOwnProperty 方法
- hasOwnProperty 是否拥有指定的实例属性（不包含原型成员）
- in 关键字，检查对象中是否存在某个指定的属性(实例成员 + 原型成员)
function Person(name){
this.name = name;
}
Person.prototype.hi = 'hi';
var p1 = new Person();
//语法 对象.hasOwnProperty ('属性')
console.log(p1.hasOwnProperty('name')); // true
console.log(p1.hasOwnProperty('age')); //false
console.log(p1.hasOwnProperty('hi')); //false
//语法 ‘属性’ in 对象
console.log('name' in p1); //true
console.log('age' in p1 ); //false
console.log('hi' in p1); //true
isPrototype 方法
function Person(name){
this.name = name;
}
var obj = {};
var o = {
hi:'hi'
};
Person.prototype = o;
var p1 = new Person('李四')；
//Object.prototype Object 构造函数的原型对象
//判断 o 是否是 p1 的原型对象
console.log(Object.prototype.isPrototypeOf(p1));
思考
- 每个对象都是由构造函数创建的
- 每个构造函数都有原型对象
- 构造函数的原型对象本身也是对象
- 因此构造函数的原型对象也有构造函数
- 构造函数的原型对象的构造函数也有原型对象
- 终端是 Object.prototype