Prototype and Constructor in JavaScript
2014-07-08 23:26
323 查看
The concept of prototype in JavaScript is very confusing, especially to those who come with a C++/JAVA/... background. As an OOP langauge, JavaScript is very different from the languages with
class. Its classless feature make it somehow difficult to understand. To muddy the water, JavaScript uses
prototype-based inheritance but the prototype property of an object is not really its prototype.
As a beginner, I read many articles and do some experiments to tidy up the mess of prototype. Here I would like to share what I have learnt with you. Most of the findings I get is experiment based so you can evaluate them by
typing simple statements in the editor you use!
As Linus said, "Talk is cheap. Show me the code." Let me show you the demonstration code below. To begin, we have:
First, let's look at the variable x: (all boolean expression evaluate to true in this article)
Then, we look at the function abc:
(1) The x.constructor actually does not exist. x.__proto__.constructor is accessed instead.
(2) More on abc.prototype.constructor:
(3) The reason why x is an instance of
Object : tracking down the __proto__ chain
(4) When properties are added to the __proto__ chain, x access the closest one in chain.
Conclusion
Given a new object Obj. Obj does not have its own constructor property. Only Obj.__proto__ has the constructor.
When a function Func is declared, an object Func.prototype is created too. Func.prototype is created with a property constructor:Func.
(Obj1 instanceof Obj2) tracks down the __proto__ link of Obj1 to see if Obj2.prototype exists
When Obj.prop1 is accessed, the whole __proto__ link is tracked to find the property in Obj's closest relative
Do you find it interesting? If yes, please tell me so that I will write more on this topic in the future!
class. Its classless feature make it somehow difficult to understand. To muddy the water, JavaScript uses
prototype-based inheritance but the prototype property of an object is not really its prototype.
As a beginner, I read many articles and do some experiments to tidy up the mess of prototype. Here I would like to share what I have learnt with you. Most of the findings I get is experiment based so you can evaluate them by
typing simple statements in the editor you use!
As Linus said, "Talk is cheap. Show me the code." Let me show you the demonstration code below. To begin, we have:
function abc() { // nothing } var x = new abc();
First, let's look at the variable x: (all boolean expression evaluate to true in this article)
x.__proto__ === abc.prototype; // abc.prototype is used to build x x.constructor === abc; // not really, see (1) typeof x.prototype === "undefined"; // cannot be used to build new object
Then, we look at the function abc:
typeof abc === "function"; abc.__proto__ === Function.prototype; abc.constructor === Function; // not really, see (1) typeof abc.prototype === "object";
(1) The x.constructor actually does not exist. x.__proto__.constructor is accessed instead.
abc.prototype.constructor === abc; x.hasOwnProperty('constructor') === false; abc.prototype.hasOwnProperty('constructor') === true;
(2) More on abc.prototype.constructor:
abc.prototype = {}; // abc.prototype becomes a new empty object x instanceof abc === false; // x is no longer an instance of abc, see (3) x.constructor === abc; // constructor property is still abc, why? x.__proto__ !== abc.prototype; // because __proto__ points at the old abc.prototype x = new abc(); // reassign new abc() to x x instanceof abc === true; // x is an instance of abc again, see (3) x.__proto__ === abc.prototype; // same now abc.prototype.hasOwnProperty('constructor'); // the empty object does not has its own constructor abc.prototype.__proto__.constructor === Object // the constructor of Object.prototype is used x.constructor === Object; // x.__proto__.__proto__.constructor is accessed
(3) The reason why x is an instance of
Object : tracking down the __proto__ chain
abc.prototype.__proto__ === Object.prototype; abc.prototype instanceof Object === true; x.__proto__ === abc.prototype; x instanceof abc === true; x.__proto__.__proto__ === Object.prototype; x instanceof Object === true;
(4) When properties are added to the __proto__ chain, x access the closest one in chain.
abc.prototype.color = "red"; x.color === "red"; // abc.prototype.color is accessed Object.prototype.food = "potato"; x.food === "potato"; // Object.prototype.food is accessed abc.prototype.food = "apple"; // now abc.prototype also has food property x.food === "apple"; // food property in abc.prototype is accessed instead Object.prototype.food === "potato"; // food property in Object.prototype remains unchanged
Conclusion
Given a new object Obj. Obj does not have its own constructor property. Only Obj.__proto__ has the constructor.
When a function Func is declared, an object Func.prototype is created too. Func.prototype is created with a property constructor:Func.
(Obj1 instanceof Obj2) tracks down the __proto__ link of Obj1 to see if Obj2.prototype exists
When Obj.prop1 is accessed, the whole __proto__ link is tracked to find the property in Obj's closest relative
Do you find it interesting? If yes, please tell me so that I will write more on this topic in the future!
相关文章推荐
- Prototype and Constructor in JavaScript
- javascript 对象及原型继承有关的属性:constructor、prototype、isPrototypeOf、instanceof、in 、hasOwnProperty 等等
- Difference between prototype and this in JavaScript
- javascript 对象及原型继承有关的属性:constructor、prototype、isPrototypeOf、instanceof、in 、hasOwnProperty 等等
- Javascript Module pattern template. Shows a class with a constructor and public/private methods/properties. Also shows compatibility with CommonJS(eg Node.JS) and AMD (eg requireJS) as well as in a br
- Sams Teach Yourself Ajax, JavaScript, and PHP All in One
- Function.apply and Function.call in JavaScript
- Using JavaScript in Page Flow and Portal Applications
- 2.2. JavaScript Libraries and Prototype
- 通过HttpHandler和属性用Javascript调用C#方法(Using a HttpHandler and Attributes to call C# methods in Javascript)
- Get the content of an Iframe in Javascript – crossbrowser solution for both IE and Firefox
- LoadControl a UserControl - *and* pass in Constructor Parameters
- Drag And Drop In Javascript
- Get the content of an Iframe in Javascript – crossbrowser solution for both IE and Firefox
- 从内部和外部的js文件中获取ASPX页面的控件ClientID(get control reference from inline and external javascript)
- Dragging and dropping table rows in Javascript
- javascript 中的constructor和prototype图
- An Introduction to JavaScript Object Notation (JSON) in JavaScript and .NET
- [JavaScript]Event Object in FireFox and IE
- Prototype and script.aculo.us: You Never Knew JavaScript Could Do This!