javascript之物件導向

標籤：var   原型對象   委託   lex   RoCE   寫法   執行個體   建立   定義   

建立對象

1、姿勢一

var person = new object();person.name = ‘jack‘person.age = 18;person.sayName = function(){    console.log(this.name);

2、姿勢二（簡單方便，推薦使用）

var person = {    name: ‘jack‘,    age: 18,    sayName: function(){        console.log(this.name);    }}

建構函式

function Person(name, age){    this.name = name,    this.age = age,    this.sayName = function(){        console.log(this.name);    }}var p1 = new Person(‘jack‘, 18);p1.sayName(); // jack

建構函式和執行個體對象的關係

在每一個執行個體對象中同時有一個constructor屬性，該屬性指向建立該執行個體的建構函式

function Person(name, age){    this.name = name,    this.age = age,    this.sayName = function(){        console.log(‘i am ‘ + this.name);    }};var p1 = new Person(‘alex‘, 18);var p2 = new Person(‘jason‘, 17);console.log(p1.constructor === Person); // trueconsole.log(p1.constructor === p2.constructor); //true

檢測物件類型，使用instanceof更加靠譜

console.log(p1 instanceof Person); //trueconsole.log(p2 instanceof Person); //true

對於每一個執行個體來說，sayName都是一模一樣的內容每一次產生一個執行個體，都必須為重複的內容，多佔用一些記憶體，如果執行個體對象很多，會造成極大的記憶體浪費

var fns = {    sayName: function(){        console.log("i am" + this.name);    }}function Person(name, age){    this.name = name,    this.age = age,    this.sayName = fns.sayName}var p1 = new Person(‘alex‘, 18);p1.sayName();

上述方法解決了記憶體浪費的問題，但是看起來不夠優雅，終極解決方案prototype

原型

JavaScript 規定，每一個建構函式都有一個 prototype 屬性，指向另一個對象。

function F(){};console.log(F.prototype) // Object

建構函式的 prototype 對象預設都有一個 constructor 屬性，指向 prototype 對象所在函數。

console.log(F.prototype.constructor === F) // => true

通過建構函式得到的執行個體對象內部會包含一個指向建構函式的 prototype 對象的指標 proto。

var instance = new F()console.log(instance.__proto__ === F.prototype) // => true

這也就意味著，我們可以把所有對象執行個體需要共用的屬性和方法直接定義在 prototype 對象上。

function Person(name, age){    this.name = name    this.age = age}Person.prototype.type = ‘human‘;Person.prototype.sayName = function(){    console.log(this.name);}var p1 = new Person(‘alex‘, 18);var p2 = new Person(‘jack‘, 18);console.log(p1.sayName === p2.sayName); //true

建構函式、執行個體、原型三者之間的關係

注意：

"contructor"並不表示（對象）被（它）構造

p1.contructor只是通過預設的[[Prototype]]委託指向Person和“構造”毫無關係。Person.prototype的。contructor屬性只是Person函式宣告時的預設屬性

function Person(name, age){    this.name = name,    this.age = age,    this.sayName = function(){        console.log(‘i am ‘ + this.name);    }};function Test(){    this.name = ‘test‘;}Person.prototype = {    constructor: Test}var p1 = new Person(‘alex‘, 18);console.log(p1.constructor === Person) // falseconsole.log(Person.prototype.constructor.name) // Test

更優雅的寫法

function Person(name, age){    this.name = name,    this.age = age    }Person.Prototype = {    contructor: Person,    // => 手動將 constructor 指向正確的建構函式 防止原型對象丟失    type: ‘human‘,    sayName: function(){        console.log("I am " + this.name);    }}

javascript之物件導向