Prototype/Constructor
In my opinion, there are two big things in Javascript's world - Closure and Prototype.
Question 1.
What does Prototype do in JavaScript?
In a single word, it's a feature that aimed at reducing code duplication.
We all know in computer world there is a famous philosophy - Don't Repeat Yourself.
In classic object-oriented languages such as c++/c#/java, we have inheritance to encapsulate some common methods into a super class to reduce code lines.
But in JavaScript, there is no concept of Class, we use Function and Prototype concept to imitate the similar behavior.
Question 2.
Who owns the Prototype?
Function owns the prototype property, not object itself.
In JavaScript, all things are object(include function), so function can have it's own property.
In fact, every function has a prototype property, which is an Object.
Object created from function has a hidden link to the function's prototype object.
Functions created in this propose are called constructor function, which should start with a capital letter.
For example:
function User(name) { this.name = name; } User.prototype.getName = function() { return this.name; }; var user = new User('Zhang San'); alert(user.getName());
In this example, User is a constructor function.
user is a instance of User which has privileges to access prototype method getName.
Questions 3.
Who create me?
Every object has a constructor property, which indicate the constructor function.
see this exmple:
function User(name) { this.name = name; } var user = new User('Zhang San'); alert(user.constructor === User); // true alert(user.constructor.prototype === User.prototype); // true alert({}.constructor === Object); // true alert([].constructor === Array); // true alert(''.constructor === String); // true
Because User.prototype is an object, it has constructor property:
alert(user.constructor.prototype.constructor); // User
we can redefine the constructor function's prototype like this:
function Person(sex) { this.sex = sex; } function User(name) { this.name = name; } User.prototype = new Person('man'); var user = new User('Zhang San'); alert(user.sex); // 'man' alert(user.constructor); // 'Person'
Note that user.constructor is Person now, not User.
We can fix it using a trick:
function Person(sex) { this.sex = sex; } function User(name) { this.name = name; } User.prototype = new Person('man'); User.prototype.constructor = User;var user = new User('Zhang San'); alert(user.sex); // 'man' alert(user.constructor); // 'User'
Question 4.
Object/Array are types?
You'd better think them as constructor functions, just like User has done.
Maybe there are definition in JavaScript core like this:
function Object() { } function Array() { }
The pre-defined constructor functions have read-only prototypes.
For examples:
Array.prototype.max = function() { var maxValue = this[0]; for (var i = 1; iArray.prototype = { 'max': function() { var maxValue = this[0]; for (var i = 1; i
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2983/viewspace-2805228/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Javascript - prototype、__proto__、constructorJavaScriptStruct
- JS 系列二:深入 constructor、prototype、__proto__、[[Prototype]] 及 原型鏈JSStruct原型
- 深入分析js中的constructor 和prototypeJSStruct
- 原型鏈、_ptoto_、prototype、constructor的學習原型Struct
- JavaScript學習筆記之constructor,prototype,__proto__解惑JavaScript筆記Struct
- 用自己的方式(圖)理解constructor、prototype、__proto__和原型鏈Struct原型
- 一張圖理解prototype、proto和constructor的三角關係Struct
- 幫你徹底搞懂JS中的prototype、__proto__與constructor(圖解)JSStruct圖解
- 徹底深刻理解js原型鏈之prototype,__proto__以及constructor(二)JS原型Struct
- 徹底深刻理解js原型鏈之prototype,__proto__以及constructor(一)JS原型Struct
- 幫你徹底搞懂JS中的prototype、__proto__與constructor(圖解)(轉)JSStruct圖解
- Object.prototype.__proto__, [[prototype]] 和 prototypeObject
- JavaScript constructorJavaScriptStruct
- Default copy constructor does not call correct base(轉) constructorStruct
- get_constructorStruct
- constructor和superStruct
- TypeError: SizeOnlySource is not a constructorErrorStruct
- Lombok 之 ConstructorLombokStruct
- JavaScript prototypeJavaScript
- Angular 2 constructor & ngOnInitAngularStructGo
- React 中constructor 作用ReactStruct
- JavaScript prototype 原型JavaScript原型
- JavaScript:原型(prototype)JavaScript原型
- 關於prototype
- C++物件模型:constructorC++物件模型Struct
- js報錯:TypeError: Date is not a constructorJSErrorStruct
- javascript constructor簡單介紹JavaScriptStruct
- PatchObject constructor:Input file does not existObjectStruct
- JavaScript prototype原型用法JavaScript原型
- Function.prototype.callFunction
- JavaScript prototype屬性JavaScript
- JavaScript中prototype用法JavaScript
- Array.prototype.indexOf()Index
- __proto__和prototype
- 原型模式(Prototype)原型模式
- 請教prototype模式!模式
- 7.107 JSON Type ConstructorJSONStruct
- constructor 未指向建構函式Struct函式