学习《JS高级程序设计》(2)——原型
来源:互联网 发布:edu域名查询 编辑:程序博客网 时间:2024/06/05 15:33
原型
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。
1.理解原型对象
无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针。就拿前面的例子来说,Person.prototype.constructor指向Person。而通过这个构造函数我们还可继续为原型对象添加其他属性和方法。
创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法,则都是从Object继承而来的。当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。ECMA-262第5版管这个指针叫[[Prototype]]。虽然在脚本中没有标准的方式访问[[Prototype]],但Firefox、Safari和Chrome在每个对象上都支持一个属性__proto__
;而在其他实现中,这个属性对脚本则是完全不可见的。不过,要明确的真正重要的一点就是,这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间。
以前面使用Person构造函数和Person.prototype创建的代码为例,关系如下图。
在此,Person.prototype指向原型对象,而Person.prototype.constructor又指回了Person。原型对象中除了包含constructor属性之外,还包括后来添加的其他属性。Person的每个实例——person1和person2都包含一个内部属性,该函数仅仅指向了Person.prototype;换句话说,它们与构造函数没有直接的关系。此外,要格外注意的是,虽然这两个实例都不包含属性和方法,但我们却可以调用person1.sayName()。这是通过查找对象属性的过程来实现的。
每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性的值。也就是说,在我们调用person1.sayName()的时候,会先后执行两次搜索。首先,解析器会问:“实例person1有sayName属性吗?”答:“没有。”然后,它继续搜索,再问:“person1的原型中有sayName属性吗?”答:“有。”于是,它就读取那个保存在原型对象中的函数。当我们调用person2.sayName()时,将会重现相同的搜索过程,得到相同的结果。而这正是对象实例共享原型所保存的属性和方法的基本原理。
因此,我们可以通过在实例创建该属性来屏蔽原型中的属性。还可以用delete来删除实例属性,从而使我们能够重新访问原型中的属性。
function Person(){}Person.prototype.name="Nicholas";Person.prototype.sayName=function(){ alert(this.name);};var person1=new Person();person1.name="Greg";person1.sayName();//Greg——来自实例var person2=new Person();person2.sayName();//Nicolas——来自原型delete person1.name;person1.sayName();//Nicolas——来自原型alert(person1.sayName==person2.sayName);//true
2.一些方法
isPrototypeOf()
如果[[Prototype]]指向调用isPrototypeOf()方法的对象(Person.prototype),那么这个方法就返回ture。
Object.getPrototypeOf()
这个方法返回[[Prototype]]的值
hasOwnProperty()
检测额一个属性是存在于实例中,还是存在于原型中。这个方法只在给定属性存在于对象实例中时,才会返回true。
in操作符
有两种方式使用in操作符:单独使用和在for-in循环中使用。
在单独使用时,in操作符会在通过对象能够访问给定属性时返回tree,无论该属性存在于实例中还是原型中。
在使用for-in循环时,返回的是所有能够通过对象访问的、可枚举(enumerated)属性,其中既包括存在于实例中的属性,也包括存在于原型中的属性。屏蔽了原型中不可枚举属性(即将[[Enumerable]]标记为false的属性)的实例属性也会在for-in循环中返回,因为根据规定,所有开发人员定义的属性都是可枚举的。
hasPrototypeProperty(书上自己定义)
function hasPrototypeProperty(object , name){
return !object.hasOwnProperty(name) && (name in object);
}
由于in操作符只要通过对象能访问到属性就返回true,hasOwnProperty()只在属性存在于实例时才返回true,因此只要in操作符返回true而hasOwnProperty()返回false,就可以确定属性是原型中的属性。
Object.keys()
这个方法接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组。例如:
function Person(){}Person.prototype.name="Nicholas";Person.prototype.age=29;Person.prototype.job="Software Engineer";Person.prototype.sayName=function(){ alert(this.name);};var keys = Object.keys(Person.prototype);alert(keys);//"name,age,job,sayName"var p1=new Person();p1.name="Rob";p1.age=31;var p1keys = Object.keys(p1);alert(p1keys);//"name,age"
3.更简单的原型语法
前面例子每添加一个属性和方法都要敲一遍Person.prototype。为减少不必要的输入,也为了从视觉上更好地封装原型的功能,更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象,如下面的例子所示。
function Person(){}Person.prototype={ name:"Nicholas", age:29, job:"Software Engineer", sayName : function(){ alert(this.name); }}
在上面的代码中,我们将Person.prototype设置为等于一个对象字面量形式创建的新对象。最终结果相同,但有一个例外:constructor属性不再指向Person了。前面曾经介绍过,每创建一个函数,就会同时创建它的prototype对象,这个对象也会自动获得constructor属性也就变成了新对象的constructor属性(指向Object构造函数),不再指向Person函数。此时,尽管instanceof操作符还能返回正确的结果,但通过constructor已经无法确定对象的类型。
4.原型的动态性
由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例反映出来——即使是先创建了实例后修改原型也一样如此。
var friend = new Person();Person.prototype.sayHi=function(){ alert("hi");};friend.sayHi();//"hi"(没有问题)
以上代码先创建了Person的一个实例,并将其保存在friend中。然后,下一条语句在Person,prototype中添加了一个方法sayHi()。即使friend实例是在添加新方法之前被创建的,但它仍然可以访问这个新方法。其原因可以归结为实例与原型直接的松散连接关系。当我们调用friend.sayHi()时,首先会在实例中搜索名为sayHi的属性,在没找到的情况下,会继续搜索原型。因为实例与原型之间的连接只不过是一个指针,而非一个副本,因此就可以在原型中找到新的sayHi属性并返回保存在那里的函数。
尽管可以随时为原型添加属性和方法,并且修改能够立即在所有对象实例中反映出来,但如果重写整个原型对象,那么情况就不一样了。我们知道,调用构造函数时会为实例添加一个指向创建时函数原型的[[Prototype]]指针,而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。看下面的例子
function Person(){}var friend = new Person();Person.prototype={ constructor:Person, name:"Nicholas", age:29, job:"Software Engineer", sayName:function(){ alert(this.name);}};friend.sayName();//error
5.原生对象的原型
原型模式的重要性不仅体现在创建自定义类型方面,就连所有原生的引用类型,都是采用这种模式创建的。所有原生引用类型(Object、Array、String,等等)都在其构造函数的原型上定义了方法。例如,在Array.prototype中可以找到sort()方法,而在String.prototype中可以找到subString()方法,如下所示。
alert(typeof Array.prototype.sort);//"function"alert(typeof String.prototype.subSstring);//"function"
通过原生对象的原型,不仅可以取得所有默认方法的引用,而且也可以定义新方法。可以像修改自定义对象的原型一样修改原生对象的原型,因此可以随时添加方法。下面的代码就给基本包装类型String添加了一个名为replacespace()的方法。
var s=" abb c ";console.log(s);//" abb c "String.prototype.replacespace=function(){ return this.replace(/(^\s+)|(\s+$)/g,"");}console.log(s.replacespace());//"abb c"
既然方法被添加给了String.prototype,那么当前环境中的所有字符串就都可以调用它。
- 学习《JS高级程序设计》(2)——原型
- 学习《JS高级程序设计》(3)-原型链
- 学习《JS高级程序设计》(4)——闭包
- 学习《JS高级程序设计》(5)——正则
- JavaScript高级程序设计(第2版) 学习笔记:(三)js原型的四种形态
- js高级——原型
- 《JavaScript高级程序设计》——原型对象、原型链
- Javascript高级程序设计——14.面向对象与原型(2)
- js高级程序设计笔记--原型模式
- 《javascript高级程序设计(第二版)》学习(4)原型
- JavaScript高级程序设计(第2版) 学习笔记:(六)js基于构造函数与原型的继承
- js高级程序设计学习笔记——基本概念
- js高级程序设计学习笔记2
- js高级——原型的使用方法
- js高级——替换原型对象
- js高级——原型链结构
- Javascript高级程序设计——14.面向对象与原型(1 )
- Javascript高级程序设计——14.面向对象与原型(3)
- 小程序之全局变量赋值
- 在<c:foreach 里面调用js代码
- 线上问题:nginx日志打印时间问题
- 虚拟机下安装ubuntu后root密码设置
- excel 查找/替换 回车键
- 学习《JS高级程序设计》(2)——原型
- Server-Sent Events和WebSocket服务器向浏览器推送信息
- openstack安装学习(环境)
- 利用tf.truncated_normal与tf.random_normal进行张量初始化的详解
- 对String在多线程中的一些简单认识
- 各主流浏览器之间的兼容性-JS篇
- 对建造者模式的总结
- 解决Xcode 8以后的Alcatraz等插件不可用
- PAT (Advanced Level) Practise1133Splitting A Linked List (25)