说一说js中__proto__和prototype以及原型继承的那些事
2015-06-03 13:51
260 查看
在面试中遇到过,问js如何实现继承,其实最好的方式就是构造函数+原型,今天在讨论中,发现自己以前理解上的一些误区,特地写出来,最近都比较忙,等手上的项目做完,可以来做个总结。
先说我以前没有认识到位的地方
1 __proto__这个不是标准实现的,但是各大浏览器和node都采用了,ECMA6计划标准化它,__proto__对应于标准中的[[prototype]],也就是所谓的内置原型属性,要把它和函数的prototype的相区别,其实,__proto__最终是指向Function.prototype的,这也是和js函数第一性对应的,js有函数化编程的基因。
2函数既有prototype属性也有[[prototype]]属性 也就是__proto__,其中prototype主要是为了实现类的继承,而__proto__只有对象才有,当然js中函数就是对象,所以函数也有__proto__,函数的__proto__就是指向Function.prototype的,对象只有__proto__,它是指向这个对象的构造函数的,对象没有prototype属性。
接着可以看一些简单的例子:
3注意new 构造函数f的时候,new分三步2,首先创建一个新对象,第二把新对象的__proto__中的构造函数替换成f.prototype.constructor,然后把f中的this相应的指向新对象的context
4可以看看ECMA5的Object.create的实现,加深理解
先说我以前没有认识到位的地方
1 __proto__这个不是标准实现的,但是各大浏览器和node都采用了,ECMA6计划标准化它,__proto__对应于标准中的[[prototype]],也就是所谓的内置原型属性,要把它和函数的prototype的相区别,其实,__proto__最终是指向Function.prototype的,这也是和js函数第一性对应的,js有函数化编程的基因。
2函数既有prototype属性也有[[prototype]]属性 也就是__proto__,其中prototype主要是为了实现类的继承,而__proto__只有对象才有,当然js中函数就是对象,所以函数也有__proto__,函数的__proto__就是指向Function.prototype的,对象只有__proto__,它是指向这个对象的构造函数的,对象没有prototype属性。
接着可以看一些简单的例子:
var Father=function(){//需继承的父类 this.gate ="ok"; } var One=function(){ this.person="no"; } One.prototype=new Father();//替换prototype属性的prototype对象 就差不多是你 //Object.creat()的实现 one=new One();//one的实例 console.log(one.gate);//输出ok 实现继承 console.log(One.prototype.constructor);//打印被替换的prototype.constructor,本应该是One var two=new (one.__proto__constructor)//error 你产生的实际上是Father的实例 console.log(two.person);//undefined console.log(one.prototype);//undefined
3注意new 构造函数f的时候,new分三步2,首先创建一个新对象,第二把新对象的__proto__中的构造函数替换成f.prototype.constructor,然后把f中的this相应的指向新对象的context
4可以看看ECMA5的Object.create的实现,加深理解
相关文章推荐
- JS冒泡和闭包案例分析
- jsp out对象、response.getWriter与response.getOutputStream
- Javascript跨域与浏览器同源
- js获取时间距离倒计时
- 随笔分类 - 无废话ExtJs系列教程
- 详解JavaScript中循环控制语句的用法
- 记录一个JS异常Uncaught NotFoundError
- 讲解JavaScript中for...in语句的使用方法
- JavaScript中for循环的使用详解
- 详解JavaScript的while循环的使用
- JavaScript - implement page lazy loading via mouse scrolling
- JavaScript中switch语句的用法详解
- js之滚动置顶效果
- JavaScript中的条件判断语句使用详解
- js光标
- js 循环提交ajax请求
- Jstree Demo
- 简单介绍JavaScript的变量和数据类型
- 在HTML中插入JavaScript代码的示例
- 在浏览器中打开或关闭JavaScript的方法