javascript原型

我们创建的每个函数都有一个 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
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值