1. 程式人生 > >javascript 面向對象基礎 (1)

javascript 面向對象基礎 (1)

ron str strong bsp rip spa pro type 通過

常見的創建對象的方式有3種:

① 聲明變量的方式

var obj1 = { key1: "val1", key1: "val2", show: function () { console.log(this.key1) } }
var array = [1, 2, 3];

可以給 obj1 繼續添加屬性和方法,如:

obj1.color = "red";
obj1.hideen = function () { console.log("aaa") };

使用操作符 new

var obj2 = new Object();

可以給 obj2

繼續添加屬性和方法,如:

obj2.name = "madom";
obj2.show = function () { console.log("aaa") };

③ 創建構造函數

function Cat() {             
  this.age = "18";   this.show = function () {     console.log(this.age);   } }

其實,構造函數 也是普通函數,只有當 new 操作的時候才是構造函數,

通過構 造函數 創建實例對象。每一個對象都有自己的內部原型 proto_

各個實例對象之間並不相同。


var cat1 = new Cat(); 
cat1.__proto__ === Cat.prototype; //true
var cat2 = new Cat(); 
cat2.__proto__ === Cat.prototype; //true 
cat1 === cat2; // fals  

再創建一個帶有 return 的構造函數

function Bird() {
    this.age = 19;
    this.say = function () { console.log(‘my age is ‘ + 19) };
    return {
        name: 
‘Tim‘, say: function () { console.log(‘hello ‘ + this.name) }, }; }

創建一個對象實例,看看有什麽不同

var bird = new Bird();
bird.say(); // hello Tim
console.log(bird); // Object {name: "Tim", say: function}

發現:如果構造函數有 return,則對象實例無法使用構造函數 return 之前的屬性和方法


new 操作時內部的運作大致如下:
第1步: 在內存中開辟一塊空間。
第2步: 創建一個新空對象,並把 this 指向到這個空對象。
第3步: 把空對象的 內部原型 指向 構造函數的 原型對象。
第4步: 當構造函數執行完成後,如果 沒有 return(返回值) 的話,
則構造函數末尾存在 ‘隱式’ 的 return this;如果 return(返回值),則將返回值賦值給對象實例。

對創建實例的操作做如下模擬(非真實執行):

var cat1 = new Cat();
/* this = { };
 * this._proto_ = Cat.prototype
 * this = cat1;
 * return this
 */

--- 知識在於分享,轉載請註出處 ---

javascript 面向對象基礎 (1)