在js中经常可以接触到prototype、prototype.constructor、constructor.prototype,感觉像一个圈一样,绕来绕去,他们是什么关系,什么时候该用哪一个,这是让很多新学js的人困惑的问题。
我们知道在js中,prototype是函数的原型,定义了一类对象共有的属性(通常都是方法),是该类对象的"blueprint"。
constructor是对象的构造函数,当我们通过声明一个构造函数来创建“类”时,constructor属性被隐性的添加到该"类"的prototype上,指向该构造函数自己。我们可以通过下面的代码验证:
function ClassA(){}
console.log(ClassA.prototype.constructor == ClassA); //true
之所以把构造函数自身的引用又添加到prototype,目的是方便我们区分不同对象的实例。
当我们执行var a = new ClassA()时,在堆内存中生成一个新的object,然后将隐性的创建__proto__属性指向ClassA的prototype,最后将该object的地址赋给栈中的变量a,这样我们就通过a可以访问到在ClassA的prototype上定义的一些属性方法。所以
function ClassA(){}
var a = new ClassA();
console.log(a.constructor === ClassA); //true
既然a.constructor是ClassA,那么a.constructor.prototype当然就是ClassA的prototype了。
值得注意的是虽然通过
ClassA.prototype = {
set = function (){},
get = function (){}
}
的形式来添加原型方法很方便,却忽略了会重写ClassA原有的prototype,导致丢失constructor属性,所实例化的对象的constructor属性将变为function Object(){[native code]}。解决的办就是自己手动将constructor属性赋值给ClassA。
另外,由于任何function都是由Function对象实例化来的,所以每个function的constructor都指向Function(){}
function ClassA(){}
console.log(ClassA.constructor); // function Function(){[native code]}
分享到:
相关推荐
分析javascript中 prototype __proto__ constructor之间的关系
这是基于但使用Object.defineProperty(arguments.constructor.prototype, [functionName], {enumerable: false, configurable: true, value: [functionBody]})代替,以避免迭代时出现混乱。 Object....
JS:typeof instanceof constructor prototype区别
我们在定义函数的时候,函数定义的时候函数本身就会默认有一个prototype的属性,而我们如果用new 运算符来生成一个对象的时候就没有prototype属性。我们来看一个例子,来说明这个 代码如下: function a(c){ this.b =...
代码如下: [removed] Function.prototype.createInstance = function(){ var T = function(){}; T.prototype = this.prototype; T.constructor = this; var o = new T(); this.apply(o, arguments); return o; }...
本文实例讲述了JS仿Base.js实现的继承。分享给大家供大家参考,具体如下: var Klass = function() {}; Klass.extendClass = (function() { ... C.prototype.constructor = C; }; })(); Klass.extend = func
function定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别。在prototype对象中又有一个constructor属性,这个constructor...
b.constructor==BB.prototype.constructor) //true 这里的“有了”的执行过程是先查看b有没有此属性让后去查看prototype里的属性值,不是简单的A=B:如添加:b.constructor=”ccc”; 执行:alert(b.constructor=...
一直没弄清楚JavaScript中的prototype和constructor属性,今天看了看书,总算有点眉目了
10. prototype与__proto__的关系与区别 11. 继承的实现方式及比较 12. 深拷贝与浅拷贝 13. 防抖和节流 14. 作用域和作用域链、执行期上下文 15. DOM常见的操作方式 16. Array.sort()方法与实现机制 17. Ajax 17. ...
Get the name of the next property of Result(3) that doesn t have the DontEnum attribute.
主要介绍了js构造函数constructor和原型prototype原理与用法,结合实例形式分析js构造函数constructor和原型prototype基本原理、功能、使用方法及操作注意事项,需要的朋友可以参考下
如上图所示,我创建了两个对象person1 与 person2,这两个对象都要调用study 这个函数,这样就会在内存开辟两个study空间,但函数实现的功能都是一样的,所以这样太浪费内存空间了,所以原型的出现就是为了解决了这...
对象创建: 当一个函数对象被创建时候,Function构造器产生的函数对象会运行类似这样的代码: 代码如下: this.prototype={constructor:this}; 假设函数F F用new方式构造对象时,对象的constructor被设置成这个F....
foo.prototype.constructor=function foo() 动物B(function function()), 动物B的模板描述 . B.模板 (function.prototype), B.模板有个构造方法 function.prototype.constructor=function function() 狗C= new 狗类...
主要介绍了详解帮你彻底搞懂JS中的prototype、__proto__与constructor(图解),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本文实例讲述了js封装可使用的构造函数继承用法。分享给大家供大家参考。... Child.prototype.constructor = Child; Child.uber = Parent.prototype; } 另外还有一种拷贝继承方法,属性拷贝: 这种方法与之前
webkitRTCPeerConnection.prototype.getRemoteStreams = function() { return this.remoteStreams; }; } } else { webRTCSupport = false; throw new Error("Browser does not appear to be WebRTC-capable");...
在javascript中,prototype、constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系,楼主就着自己对它们的浅显认识,来粗略地理理以备忘,有不对之处还望斧正。