JavaScript学习笔记(对原型的理解)

理解原型对象

只要创建了一个函数,函数自动获得一个prototype属性,这个属性指向函数的原型对象。
在默认情况下,所有原型对象都会自动获得一个 constructor属性,这个属性指向prototype属性所在的构造函数
除了 constructor 属性,还有从Object继承来的属性,通过这个构造函数,我们还可继续为原型对象 添加其他属性和方法

//构造函数
function Person(){

}
 //原型对象
Person.prototype 

//原型对象constructor属性指向Person
Person.prototype.constructor =》Person

//给构造函数原型对象增加属性和方法
Person.prototype.funName = function(){}
Person.prototype.varName = '123'

当使用构造函数实例化一个对象,这个实例对象包含一个指针(内部属性),指向构造函数的原型对象。

FirefoxSafariChrome 在每个对象上都支持一个属性 __proto__;而在其他实现中,这个属性对脚本则是完全不可见的

var person = new Person();
person.__proto__ === Person.prototype //true

这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间

原型关系的确认

  • isPrototypeOf
Person.prototype.isPrototypeOf(person); //true
  • Object.getPrototypeOf() 获取某个实例对象的原型
Object.getPrototypeOf(person) == Person.prototype //true

屏蔽原型属性
如果给实例添加属性与原型对象同名,原型中的属性会被实例上的属性屏蔽

function Person(){
}
Person.prototype.name = 'Allen';
Person.prototype.sayName = function(){
    alert(this.name)
}
var person = new person();
person.name = 'Bob';
alert(person.sayName());//Bob  来自实例

使用 hasOwnProperty()方法可以检测一个属性是存在于实例中,还是存在于原型中。

person.hasOwnProperty("name"); //true

原型与in操作符

  • 单独使用
    无论在实例还是在原型中,始终返回true
'name' in person;//true
  • for in循环
    遍历实例和原型上可枚举的属性

可以通过Object.keys()访问实例对象的可枚举属性

Object.keys(obj) //返回实例对象可枚举属性数组

字面量重写原型对象

function Person(){ } 

Person.prototype = {
    constructor : Person,//constructor 默认不再指向Person,指向Object,重新定向到person
     name : "Nicholas", 
     age : 29
}

原生对象的原型
所有原生引用类型(Object、Array、String,等等)都在其构造函数的原型上定义了方法。
例如,在 Array.prototype 中可以找到 sort()方法,而在 String.prototype 中可以找到 substring()方法,如下所示。

alert(typeof Array.prototype.sort); //"function" 
alert(typeof String.prototype.substring); //"function"

通过原生对象的原型,不仅可以取得所有默认方法的引用,而且也可以定义新方法。可以像修改自 定义对象的原型一样修改原生对象的原型,因此可以随时添加方法。下面的代码就给基本包装类型 String添加了一个名为 startsWith()的方法。

String.prototype.startsWith = function (text) { 
    return this.indexOf(text) == 0;
 }; 
var msg = "Hello world!"; 
alert(msg.startsWith("Hello")); //true
发布了34 篇原创文章 · 获赞 2 · 访问量 1651

猜你喜欢

转载自blog.csdn.net/liu_xiaoru/article/details/100771261