JavaScript系列:再巩固-原型链
2016-04-18 00:09
519 查看
图
1.实例:‘对象(实例)’有属性__proto__,指向该对象(实例)的‘构造函数的原型对象’。 2.方法:‘构造函数’除了有属性__proto__,所有构造函数方法的__proto__指向Function.prototype,Function.prototype的__proto__指向Function.prototype,Function.prototype的__proto__指向Object.prototype,Object.prototype的__proto__指向null。 还有属性prototype,构造函数方法的prototype指向该'构造方法的原型对象',构造方法的原型对象又指向Function.prototype,然后__proto__..走上述。
作者:doris 链接:https://www.zhihu.com/question/34183746/answer/58155878 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 首先,要明确几个点: 1.在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都会具有对象共有的特点。 即:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。 2.方法(Function) 方法这个特殊的对象,除了和其他对象一样有上述_proto_属性之外,还有自己特有的属性——原型属性(prototype),这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象)。原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数。 好啦,知道了这两个基本点,我们来看看上面这副图。 1.构造函数Foo() 构造函数的原型属性Foo.prototype指向了原型对象,在原型对象里有共有的方法,所有构造函数声明的实例(这里是f1,f2)都可以共享这个方法。 2.原型对象Foo.prototype Foo.prototype保存着实例共享的方法,有一个指针constructor指回构造函数。 3.实例 f1和f2是Foo这个对象的两个实例,这两个对象也有属性__proto__,指向构造函数的原型对象,这样子就可以像上面1所说的访问原型对象的所有方法啦。 另外: 构造函数Foo()除了是方法,也是对象啊,它也有__proto__属性,指向谁呢? 指向它的构造函数的原型对象呗。函数的构造函数不就是Function嘛,因此这里的__proto__指向了Function.prototype。 其实除了Foo(),Function(), Object()也是一样的道理。 原型对象也是对象啊,它的__proto__属性,又指向谁呢? 同理,指向它的构造函数的原型对象呗。这里是Object.prototype. 最后,Object.prototype的__proto__属性指向null。 总结: 1.对象有属性__proto__,指向该对象的构造函数的原型对象。 2.方法除了有属性__proto__,还有属性prototype,prototype指向该方法的原型对象。
调试代码
<html> <head> <title></title> </head> <script type="text/javascript"> //对应上面的图,我们只用到了实例---》构造函数---》构造函数的原型---》Object.prototype---》null //原型链:a1对象(实例对象)还让A.prototype对象(原型对象)之间的连接,叫做原型链 //2个对象。之间有一个链接 _proto_ //a1下是没有num1(A中没有this.num1=20),会继续通过a1._proto_找num1。 //a1下有num1(A中没有this.num1=20),不再会继续通过a1._proto_找num1, //即使A.prototype.num1 = 10; alert(a1.num1);依然是20 //.... //原型链最外层:Object.prototype function A(){ //this.num1=20 } //A.prototype.num1 = 10; /*Function.prototype.num1 = 30;*/不对 Object.prototype.num1 = 40; /*A.prototype.num1 = 60*/ A.prototype.fun = function() { alert(this.num1)//原型中的this和构造方法的this是同一个,指向实例a1 }; var a1=new A(); a1.fun(); alert(a1.num1); </script> <body> </body> </html>
增加:数组的原型链Array._proto_=Function.prototype
和数组的原型Array.prototype=[]
总结
JavaScript中有内置(build-in)构造器/对象共计
12个
(ES5中新加了JSON),这里列举了可访问的8个构造器。
剩下如Global不能直接访问,Arguments仅在函数调用时由JS引擎创建,Math,JSON是以对象形式存在的,无需new。
prototype
Object.prototype--》Object {} console.log(typeof Object.prototype) // object String.prototype--》String {length: 0, [[PrimitiveValue]]: ""} console.log(typeof String.prototype) // object Number.prototype--》Number {[[PrimitiveValue]]: 0} console.log(typeof Number.prototype) // object Boolean.prototype--》Boolean {[[PrimitiveValue]]: false} console.log(typeof Boolean.prototype) // object Error.prototype--》 D…r.aV {name: "Error", message: ""} console.log(typeof Error.prototype) // object Date.prototype--》 Invalid Date console.log(typeof Date.prototype) // object RegExp.prototype --》 /(?:)/ console.log(typeof RegExp.prototype) // object Array.prototype --》 [] //!!最重要的是 Array.prototype --》 [] console.log(typeof Array.prototype) // object Function.prototype--》function(){} //!!所有构造器函数的__proto__都指向这个,它是一个空函数(Empty function) console.log(typeof Function.prototype) // function Math.prototype-->undefined JSON.prototype-->undefined Global不能直接访问
http://www.cnblogs.com/snandy/archive/2012/09/01/2664134.html#3412281
相关文章推荐
- javascript 规范
- 总结ASP.NET C#中经常用到的13个JS脚本代码
- JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
- html5+javascript实现简单上传的注意细节
- 使用PHP+JavaScript将HTML页面转换为图片的实例分享
- js单击显示元素,点击元素以外隐藏元素
- 每个程序员都需要学习 JavaScript 的7个理由
- BZOJ 1016 JSOI 2008 巨额奖金 最小生成树计数
- 继续说一下2016里面的json功能(1)
- JS的事件处理
- 程序已经执行完毕,返回JSP页面报错 Servlet.service() for servlet jsp threw exception
- [RxJS] Returning subscriptions from the subscribe function
- Json解析库的使用
- Daily JS 04-17
- jsp标签库学习
- gulp css html image js 合并压缩
- JavaScript原型链
- JavaScript对象
- JS
- JavaScript对象的属性及序列化