我们创建的每个函数都有一个 prototype (原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
在默认情况下,所有原型对象都会自动获得一个 constructor(构造函数)属性,这个属性包含一个指向 prototype 属性所在函数的指针。举例:
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
9
10
11
12
var person1 = new Person();
person1.sayName();
//"Nicholas"
var person2 = new Person();
person2.sayName();
//"Nicholas"
alert(person1.sayName == person2.sayName);
//true
在以上例子中,Person.prototype. constructor 指向 Person 。而通过这个构造函数,我们还可继续为原型对象添加其他属性和方法。
以上内容摘自javascript高级程序设计(第三版),详情可见此书章节 6.2.3 原型模式
javascript原型和原型链是javascript三座大山之一,在js中有5条原型规则。
原型规则
1. 所有引用类型(Array,Object,Function),都具有对象特性,即可自由扩展属性(null除外)
2. 所有的引用类型,都有一个__proto__属性,属性值是一个普通的对象(隐式原型)
3. 所有的函数(function),都有一个prototype属性,属性值也是一个普通对象(显式原型)
4. 所有引用类型,__proto__指向他的构造函数的prototype属性值
5. 当试图获取一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去他的__proto__中去寻找
代码示例:
var obj = {}
var arr = []
function fun(){}
console.log(obj.__proto__)
console.log(arr.__proto__)
console.log(fun.__protp__)
console.log(obj.__proto__ === Object.prototype)//true
*注: \__proto\__属性不用自己定义,浏览器在解析js文件时自动给对象添加该属性,当然也可以通过自己定义来修改默认属性*
1. 补充-在函数中,原型中定义的方法中的this也会指向实例本身,举例:
function Fn(name, color){
this.name = name
}
Fn.prototype.alertName= function(){
alert(this.name)
}
var f = new Fn("apple", "red")
f.printName = function(){
console.log(this.name)
}
//调用函数本身的方法和原型上的方法
f.printName()
f.alertName()
2.补充-可以用循环体打印对象的属性,举例:
function Fn(name, color){
this.name = name
}
Fn.prototype.alertName= function(){
alert(this.name)
}
var f = new Fn("apple", "red")
f.printName = function(){
console.log(this.name)
}
for(var item in f){
console.log(item)
}
//此处我用chrome 58.0.3029.81测试,打印结果包括原型上的属性,有些浏览器已经在for in中屏蔽了来自原型的属性
//name
//printName
//alertName
//可以用hasOwnProperty(item)函数判断是否是自身的属性
for(var item in f){
if(f.hasOwnProperty(item)){
console.log(item)
}
}
//name
//printName