當前位置:才華齋>設計>網頁設計>

QT理解JavaScript原型

網頁設計 閱讀(2.48W)

原型

QT理解JavaScript原型

大家都知道,JavaScript 不包含傳統的類繼承模型,而是使用 prototype 原型模型。程式碼實現大概是這樣子的

function Student(name){ = name;} var Kimy = new Student("Kimy"); = function(){ ( + "say");}();//Kimysay

Kimy本身是沒有say方法的,當他在自己物件中找不到該方法時就回去他的原型中查詢,也就是otype物件中查詢。這裡我們用到了一個建構函式Student

建構函式、__proto__以及原型鏈

除了IE瀏覽器,其他瀏覽器都在Object物件的例項上,部署了一個非標準的__proto__屬性(前後各兩個下劃線),指向該物件的原型物件,即建構函式的prototype屬性。

盜用一段程式碼和一張圖

// 構造方法function Foo(y) { this.y = y;} otype.x = 10; // 繼承方法"calculate"ulate = function (z) { return this.x + this.y + z;}; // 使用foo模式建立 "b" and "c"var b = new Foo(20);var c = new Foo(30); // 呼叫繼承的方法ulate(30); // ulate(40); // 80 ( b.__proto__ === otype, // true c.__proto__ === otype, // true tructor === Foo, // true tructor === Foo, // true tructor === Foo // true ulate === b.__proto__ulate, // true b.__proto__ulate === ulate // true );

我們可以看到,每個物件都是含有一個__proto__屬性,b的`__proto__指向的構造b的構造方法Foo的prototype屬性;而otype也是一個物件,本身也有一個__proto__指向構造其的構造方法Object的prototype。otype的__proto__被指向了 null, 這就形成了一個原型鏈了。

這裡還要能理解這樣一段程式碼

Object instanceof Function//trueFunction instanceof Object//true

new做了什麼

這裡還有一個小問題,js裡面普通函式和建構函式形式上貌似沒有啥太大區別(首字母大寫不是必須的,但是通常都把建構函式的首字母大寫)。new這個關鍵字到底做了什麼東西。

比方

var Kimy = new Student();

new 做了三件事情

var Kimy = {}; Kimy.__proto__ = otype;(Kimy);

1、定義了一個空物件

2、設定其原型

3、初始化物件

這樣就能理解為什麼Kimy.__proto__指向的是otype了(同一個引用),原來就是new在起著關鍵的作用!

以上就是本文的全部內容,希望大家能夠喜歡。