前端基礎進階（九）：詳解面向對象、構造函數、原型與原型鏈

Tony_Zby 發布于2019-08-21 18:31 / 2753人閱讀

摘要：我們通過一個簡單的例子與圖示，來了解構造函數，實例與原型三者之間的關系。而原型對象的指向構造函數。于是根據構造函數與原型的特性，我們就可以將在構造函數中，通過聲明的屬性與方法稱為私有變量與方法，它們被當前被某一個實例對象所獨有。

如果要我總結一下學習前端以來我遇到了哪些瓶頸，那么面向對象一定是第一個毫不猶豫想到的。盡管我現在對于面向對象有了一些的了解，但是當初的那種似懂非懂的痛苦，依然歷歷在目。

為了幫助大家能夠更加直觀的學習和了解面向對象，我會用盡量簡單易懂的描述來展示面向對象的相關知識。并且也準備了一些實用的例子幫助大家更加快速的掌握面向對象的真諦。

jQuery的面向對象實現

封裝拖拽

簡易版運動框架封裝

這可能會花一點時間，但是卻值得期待。所以如果有興趣的朋友可以來簡書和公眾號關注我。

而這篇文章主要來聊一聊關于面向對象的一些重要的基本功。

一、對象的定義

在ECMAScript-262中，對象被定義為“無序屬性的集合，其屬性可以包含基本值，對象或者函數”。

也就是說，在JavaScript中，對象無非就是由一些列無序的key-value對組成。其中value可以是基本值，對象或者函數。

// 這里的person就是一個對象
var person = {
    name: "Tom",
    age: 18,
    getName: function() {},
    parent: {}
}

創建對象

我們可以通過new的方式創建一個對象。

var obj = new Object();

也可以通過對象字面量的形式創建一個簡單的對象。

var obj = {};

當我們想要給我們創建的簡單對象添加方法時，可以這樣表示。

// 可以這樣
var person = {};
person.name = "TOM";
person.getName = function() {
    return this.name;
}

// 也可以這樣
var person = {
    name: "TOM",
    getName: function() {
        return this.name;
    }
}

訪問對象的屬性和方法

假如我們有一個簡單的對象如下：

var person = {
    name: "TOM",
    age: "20",
    getName: function() {
        return this.name
    }
}

當我們想要訪問他的name屬性時，可以用如下兩種方式訪問。

person.name

// 或者
person["name"]

如果我們想要訪問的屬性名是一個變量時，常常會使用第二種方式。例如我們要同時訪問person的name與age，可以這樣寫：

["name", "age"].forEach(function(item) {
    console.log(person[item]);
})

這種方式一定要重視，記住它以后在我們處理復雜數據的時候會有很大的幫助。

二、工廠模式

使用上面的方式創建對象很簡單，但是在很多時候并不能滿足我們的需求。就以person對象為例。假如我們在實際開發中，不僅僅需要一個名字叫做TOM的person對象，同時還需要另外一個名為Jake的person對象，雖然他們有很多相似之處，但是我們不得不重復寫兩次。

var perTom = {
    name: "TOM",
    age: 20,
    getName: function() {
        return this.name
    }
};

var perJake = {
    name: "Jake",
    age: 22,
    getName: function() {
        return this.name
    }
}

很顯然這并不是合理的方式，當相似對象太多時，大家都會崩潰掉。

我們可以使用工廠模式的方式解決這個問題。顧名思義，工廠模式就是我們提供一個模子，然后通過這個模子復制出我們需要的對象。我們需要多少個，就復制多少個。

var createPerson = function(name, age) {

    // 聲明一個中間對象，該對象就是工廠模式的模子
    var o = new Object();

    // 依次添加我們需要的屬性與方法
    o.name = name;
    o.age = age;
    o.getName = function() {
        return this.name;
    }

    return o;
}

// 創建兩個實例
var perTom = createPerson("TOM", 20);
var PerJake = createPerson("Jake", 22);

相信上面的代碼并不難理解，也不用把工廠模式看得太過高大上。很顯然，工廠模式幫助我們解決了重復代碼上的麻煩，讓我們可以寫很少的代碼，就能夠創建很多個person對象。但是這里還有兩個麻煩，需要我們注意。

第一個麻煩就是這樣處理，我們沒有辦法識別對象實例的類型。使用instanceof可以識別對象的類型，如下例子：

var obj = {};
var foo = function() {}

console.log(obj instanceof Object);  // true
console.log(foo instanceof Function); // true

因此在工廠模式的基礎上，我們需要使用構造函數的方式來解決這個麻煩。

三、構造函數

在JavaScript中，new關鍵字可以讓一個函數變得與眾不同。通過下面的例子，我們來一探new關鍵字的神奇之處。

function demo() {
    console.log(this);
}

demo();  // window
new demo();  // demo

為了能夠直觀的感受他們不同，建議大家動手實踐觀察一下。很顯然，使用new之后，函數內部發生了一些變化，讓this指向改變。那么new關鍵字到底做了什么事情呢。嗯，其實我之前在文章里用文字大概表達了一下new到底干了什么，但是一些同學好奇心很足，總期望用代碼實現一下，我就大概以我的理解來表達一下吧。

// 先一本正經的創建一個構造函數，其實該函數與普通函數并無區別
var Person = function(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function() {
        return this.name;
    }
}

// 將構造函數以參數形式傳入
function New(func) {

    // 聲明一個中間對象，該對象為最終返回的實例
    var res = {};
    if (func.prototype !== null) {

        // 將實例的原型指向構造函數的原型
        res.__proto__ = func.prototype;
    }

    // ret為構造函數執行的結果，這里通過apply，將構造函數內部的this指向修改為指向res，即為實例對象
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));

    // 當我們在構造函數中明確指定了返回對象時，那么new的執行結果就是該返回對象
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret;
    }

    // 如果沒有明確指定返回對象，則默認返回res，這個res就是實例對象
    return res;
}

// 通過new聲明創建實例，這里的p1，實際接收的正是new中返回的res
var p1 = New(Person, "tom", 20);
console.log(p1.getName());

// 當然，這里也可以判斷出實例的類型了
console.log(p1 instanceof Person); // true

JavaScript內部再通過其他的一些特殊處理，將var p1 = New(Person, "tom", 20); 等效于var p1 = new Person("tom", 20);。就是我們認識的new關鍵字了。具體怎么處理的，我也不知道，別刨根問底了，一直回答下去太難 - -！

老實講，你可能很難在其他地方看到有如此明確的告訴你new關鍵字到底對構造函數干了什么的文章了。理解了這段代碼，你對JavaScript的理解又比別人深刻了一分，所以，一本正經厚顏無恥求個贊可好？

當然，很多朋友由于對于前面幾篇文章的知識理解不夠到位，會對new的實現表示非常困惑。但是老實講，如果你讀了我的前面幾篇文章，一定會對這里new的實現有似曾相識的感覺。而且我這里已經盡力做了詳細的注解，剩下的只能靠你自己了。

但是只要你花點時間，理解了他的原理，那么困擾了無數人的構造函數中this到底指向誰就變得非常簡單了。

所以，為了能夠判斷實例與對象的關系，我們就使用構造函數來搞定。

var Person = function(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function() {
        return this.name;
    }
}

var p1 = new Person("Ness", 20);
console.log(p1.getName());  // Ness

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

關于構造函數，如果你暫時不能夠理解new的具體實現，就先記住下面這幾個結論吧。

與普通函數相比，構造函數并沒有任何特別的地方，首字母大寫只是我們約定的小規定，用于區分普通函數；

new關鍵字讓構造函數具有了與普通函數不同的許多特點，而new的過程中，執行了如下過程：

聲明一個中間對象；

將該中間對象的原型指向構造函數的原型；

將構造函數的this，指向該中間對象；

返回該中間對象，即返回實例對象。

四、原型

雖然構造函數解決了判斷實例類型的問題，但是，說到底，還是一個對象的復制過程。跟工廠模式頗有相似之處。也就是說，當我們聲明了100個person對象，那么就有100個getName方法被重新生成。

這里的每一個getName方法實現的功能其實是一模一樣的，但是由于分別屬于不同的實例，就不得不一直不停的為getName分配空間。這就是工廠模式存在的第二個麻煩。

顯然這是不合理的。我們期望的是，既然都是實現同一個功能，那么能不能就讓每一個實例對象都訪問同一個方法？

當然能，這就是原型對象要幫我們解決的問題了。

我們創建的每一個函數，都可以有一個prototype屬性，該屬性指向一個對象。這個對象，就是我們這里說的原型。

當我們在創建對象時，可以根據自己的需求，選擇性的將一些屬性和方法通過prototype屬性，掛載在原型對象上。而每一個new出來的實例，都有一個__proto__屬性，該屬性指向構造函數的原型對象，通過這個屬性，讓實例對象也能夠訪問原型對象上的方法。因此，當所有的實例都能夠通過__proto__訪問到原型對象時，原型對象的方法與屬性就變成了共有方法與屬性。

我們通過一個簡單的例子與圖示，來了解構造函數，實例與原型三者之間的關系。

由于每個函數都可以是構造函數，每個對象都可以是原型對象，因此如果在理解原型之初就想的太多太復雜的話，反而會阻礙你的理解，這里我們要學會先簡化它們。就單純的剖析這三者的關系。

// 聲明構造函數
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 通過prototye屬性，將方法掛載到原型對象上
Person.prototype.getName = function() {
    return this.name;
}

var p1 = new Person("tim", 10);
var p2 = new Person("jak", 22);
console.log(p1.getName === p2.getName); // true

通過圖示我們可以看出，構造函數的prototype與所有實例對象的__proto__都指向原型對象。而原型對象的constructor指向構造函數。

除此之外，還可以從圖中看出，實例對象實際上對前面我們所說的中間對象的復制，而中間對象中的屬性與方法都在構造函數中添加。于是根據構造函數與原型的特性，我們就可以將在構造函數中，通過this聲明的屬性與方法稱為私有變量與方法，它們被當前被某一個實例對象所獨有。而通過原型聲明的屬性與方法，我們可以稱之為共有屬性與方法，它們可以被所有的實例對象訪問。

當我們訪問實例對象中的屬性或者方法時，會優先訪問實例對象自身的屬性和方法。

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function() {
        console.log("this is constructor.");
    }
}

Person.prototype.getName = function() {
    return this.name;
}

var p1 = new Person("tim", 10);

p1.getName(); // this is constructor.

在這個例子中，我們同時在原型與構造函數中都聲明了一個getName函數，運行代碼的結果表示原型中的訪問并沒有被訪問。

我們還可以通過in來判斷，一個對象是否擁有某一個屬性/方法，無論是該屬性/方法存在與實例對象還是原型對象。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.getName = function() {
    return this.name;
}

var p1 = new Person("tim", 10);

console.log("name" in p1); // true

in的這種特性最常用的場景之一，就是判斷當前頁面是否在移動端打開。

isMobile = "ontouchstart" in document;

// 很多人喜歡用瀏覽器UA的方式來判斷，但并不是很好的方式

更簡單的原型寫法

根據前面例子的寫法，如果我們要在原型上添加更多的方法，可以這樣寫：

function Person() {}

Person.prototype.getName = function() {}
Person.prototype.getAge = function() {}
Person.prototype.sayHello = function() {}
... ...

除此之外，我還可以使用更為簡單的寫法。

function Person() {}

Person.prototype = {
    constructor: Person,
    getName: function() {},
    getAge: function() {},
    sayHello: function() {}
}

這種字面量的寫法看上去簡單很多，但是有一個需要特別注意的地方。Person.prototype = {}實際上是重新創建了一個{}對象并賦值給Person.prototype，這里的{}并不是最初的那個原型對象。因此它里面并不包含constructor屬性。為了保證正確性，我們必須在新創建的{}對象中顯示的設置constructor的指向。即上面的constructor: Person。

五、原型鏈

原型對象其實也是普通的對象。幾乎所有的對象都可能是原型對象，也可能是實例對象，而且還可以同時是原型對象與實例對象。這樣的一個對象，正是構成原型鏈的一個節點。因此理解了原型，那么原型鏈并不是一個多么復雜的概念。

我們知道所有的函數都有一個叫做toString的方法。那么這個方法到底是在哪里的呢？

先隨意聲明一個函數：

function add() {}

那么我們可以用如下的圖來表示這個函數的原型鏈。

其中add是Function對象的實例。而Function的原型對象同時又是Object原型的實例。這樣就構成了一條原型鏈。原型鏈的訪問，其實跟作用域鏈有很大的相似之處，他們都是一次單向的查找過程。因此實例對象能夠通過原型鏈，訪問到處于原型鏈上對象的所有屬性與方法。這也是foo最終能夠訪問到處于Object原型對象上的toString方法的原因。

基于原型鏈的特性，我們可以很輕松的實現繼承。

六、繼承

我們常常結合構造函數與原型來創建一個對象。因為構造函數與原型的不同特性，分別解決了我們不同的困擾。因此當我們想要實現繼承時，就必須得根據構造函數與原型的不同而采取不同的策略。

我們聲明一個Person對象，該對象將作為父級，而子級cPerson將要繼承Person的所有屬性與方法。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.getName = function() {
    return this.name;
}

首先我們來看構造函數的繼承。在上面我們已經理解了構造函數的本質，它其實是在new內部實現的一個復制過程。而我們在繼承時想要的，就是想父級構造函數中的操作在子級的構造函數中重現一遍即可。我們可以通過call方法來達到目的。

// 構造函數的繼承
function cPerson(name, age, job) {
    Person.call(this, name, age);
    this.job = job;
}

而原型的繼承，則只需要將子級的原型對象設置為父級的一個實例，加入到原型鏈中即可。

// 繼承原型
cPerson.prototype = new Person(name, age);

// 添加更多方法
cPerson.prototype.getLive = function() {}

當然關于繼承還有更好的方式。

七、更好的繼承

假設原型鏈的終點Object.prototype為原型鏈的E(end)端，原型鏈的起點為S(start)端。

通過前面原型鏈的學習我們知道，處于S端的對象，可以通過S -> E的單向查找，訪問到原型鏈上的所有方法與屬性。因此這給繼承提供了理論基礎。我們只需要在S端添加新的對象，那么新對象就能夠通過原型鏈訪問到父級的方法與屬性。因此想要實現繼承，是一件非常簡單的事情。

因為封裝一個對象由構造函數與原型共同組成，因此繼承也會分別有構造函數的繼承與原型的繼承。

假設我們已經封裝好了一個父類對象Person。如下。

var Person = function(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.getName = function() {
    return this.name;
}

Person.prototype.getAge = function() {
    return this.age;
}

構造函數的繼承比較簡單，我們可以借助call/apply來實現。假設我們要通過繼承封裝一個Student的子類對象。那么構造函數可以如下實現。

var Student = function(name, age, grade) {
    // 通過call方法還原Person構造函數中的所有處理邏輯
    Student.call(Person, name, age);
    this.grade = grade;
}


// 等價于
var Student = function(name, age, grade) {
    this.name = name;
    this.age = age;
    this.grade = grade;
}

原型的繼承則稍微需要一點思考。首先我們應該考慮，如何將子類對象的原型加入到原型鏈中？我們只需要讓子類對象的原型，成為父類對象的一個實例，然后通過__proto__就可以訪問父類對象的原型。這樣就繼承了父類原型中的方法與屬性了。

因此我們可以先封裝一個方法，該方法根據父類對象的原型創建一個實例，該實例將會作為子類對象的原型。

function create(proto, options) {
    // 創建一個空對象
    var tmp = {};

    // 讓這個新的空對象成為父類對象的實例
    tmp.__proto__ = proto;

    // 傳入的方法都掛載到新對象上，新的對象將作為子類對象的原型
    Object.defineProperties(tmp, options);
    return tmp;
}

簡單封裝了create對象之后，我們就可以使用該方法來實現原型的繼承了。

Student.prototype = create(Person.prototype, {
    // 不要忘了重新指定構造函數
    constructor: {
        value: Student
    }
    getGrade: {
        value: function() {
            return this.grade
        }
    }
})

那么我們來驗證一下我們這里實現的繼承是否正確。

var s1 = new Student("ming", 22, 5);

console.log(s1.getName());  // ming
console.log(s1.getAge());   // 22
console.log(s1.getGrade()); // 5

全部都能正常訪問，沒問題。在ECMAScript5中直接提供了一個Object.create方法來完成我們上面自己封裝的create的功能。因此我們可以直接使用Object.create.

Student.prototype = create(Person.prototype, {
    // 不要忘了重新指定構造函數
    constructor: {
        value: Student
    }
    getGrade: {
        value: function() {
            return this.grade
        }
    }
})

完整代碼如下：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function() {
    return this.name
}
Person.prototype.getAge = function() {
    return this.age;
}

function Student(name, age, grade) {
    // 構造函數繼承
    Person.call(this, name, age);
    this.grade = grade;
}

// 原型繼承
Student.prototype = Object.create(Person.prototype, {
    // 不要忘了重新指定構造函數
    constructor: {
        value: Student
    }
    getGrade: {
        value: function() {
            return this.grade
        }
    }
})


var s1 = new Student("ming", 22, 5);

console.log(s1.getName());  // ming
console.log(s1.getAge());   // 22
console.log(s1.getGrade()); // 5

八、屬性類型

在上面的繼承實現中，使用了一個大家可能不太熟悉的方法defineProperties。并且在定義getGrade時使用了一個很奇怪的方式。

getGrade: {
    value: function() {
        return this.grade
    }
}

這其實是對象中的屬性類型。在我們平常的使用中，給對象添加一個屬性時，直接使用object.param的方式就可以了，或者直接在對象中掛載。

var person = {
    name: "TOM"
}

在ECMAScript5中，對每個屬性都添加了幾個屬性類型，來描述這些屬性的特點。他們分別是

configurable: 表示該屬性是否能被delete刪除。當其值為false時，其他的特性也不能被改變。默認值為true

enumerable: 是否能枚舉。也就是是否能被for-in遍歷。默認值為true

writable: 是否能修改值。默認為true

value: 該屬性的具體值是多少。默認為undefined

get: 當我們通過person.name訪問name的值時，get將被調用。該方法可以自定義返回的具體值時多少。get默認值為undefined

set: 當我們通過person.name = "Jake"設置name的值時，set方法將被調用。該方法可以自定義設置值的具體方式。set默認值為undefined

需要注意的是，不能同時設置value、writable 與 get、set的值。

我們可以通過Object.defineProperty方法來修改這些屬性類型。

下面我們用一些簡單的例子來演示一下這些屬性類型的具體表現。

configurable

// 用普通的方式給person對象添加一個name屬性，值為TOM
var person = {
    name: "TOM"
}

// 使用delete刪除該屬性
delete person.name;  // 返回true 表示刪除成功

// 通過Object.defineProperty重新添加name屬性
// 并設置name的屬性類型的configurable為false，表示不能再用delete刪除
Object.defineProperty(person, "name", {
    configurable: false,
    value: "Jake"  // 設置name屬性的值
})

// 再次delete，已經不能刪除了
delete person.name   // false

console.log(person.name)    // 值為Jake

// 試圖改變value
person.name = "alex";
console.log(person.name) // Jake 改變失敗

enumerable

var person = {
    name: "TOM",
    age: 20
}

// 使用for-in枚舉person的屬性
var params = [];

for(var key in person) {
    params.push(key);
}

// 查看枚舉結果
console.log(params);  // ["name", "age"]

// 重新設置name屬性的類型，讓其不可被枚舉
Object.defineProperty(person, "name", {
    enumerable: false
})

var params_ = [];
for(var key in person) {
    params_.push(key)
}

// 再次查看枚舉結果
console.log(params_); // ["age"]

writable

var person = {
    name: "TOM"
}

// 修改name的值
person.name = "Jake";

// 查看修改結果
console.log(person.name); // Jake 修改成功

// 設置name的值不能被修改
Object.defineProperty(person, "name", {
    writable: false
})

// 再次試圖修改name的值
person.name = "alex";

console.log(person.name); // Jake 修改失敗

value

var person = {}

// 添加一個name屬性
Object.defineProperty(person, "name", {
    value: "TOM"
})

console.log(person.name)  // TOM

get/set

var person = {}

// 通過get與set自定義訪問與設置name屬性的方式
Object.defineProperty(person, "name", {
    get: function() {
        // 一直返回TOM
        return "TOM"
    },
    set: function(value) {
        // 設置name屬性時，返回該字符串，value為新值
        console.log(value + " in set");
    }
})

// 第一次訪問name，調用get
console.log(person.name)   // TOM

// 嘗試修改name值，此時set方法被調用
person.name = "alex"   // alex in set

// 第二次訪問name，還是調用get
console.log(person.name) // TOM

請盡量同時設置get、set。如果僅僅只設置了get，那么我們將無法設置該屬性值。如果僅僅只設置了set，我們也無法讀取該屬性的值。

Object.defineProperty只能設置一個屬性的屬性特性。當我們想要同時設置多個屬性的特性時，需要使用我們之前提到過的Object.defineProperties

var person = {}

Object.defineProperties(person, {
    name: {
        value: "Jake",
        configurable: true
    },
    age: {
        get: function() {
            return this.value || 22
        },
        set: function(value) {
            this.value = value
        }
    }
})

person.name   // Jake
person.age    // 22

讀取屬性的特性值

我們可以使用Object.getOwnPropertyDescriptor方法讀取某一個屬性的特性值。

var person = {}

Object.defineProperty(person, "name", {
    value: "alex",
    writable: false,
    configurable: false
})

var descripter = Object.getOwnPropertyDescriptor(person, "name");

console.log(descripter);  // 返回結果如下

descripter = {
    configurable: false,
    enumerable: false,
    value: "alex",
    writable: false
}

九、總結

關于面向對象的基礎知識大概就是這些了。我從最簡單的創建一個對象開始，解釋了為什么我們需要構造函數與原型，理解了這其中的細節，有助于我們在實際開發中靈活的組織自己的對象。因為我們并不是所有的場景都會使用構造函數或者原型來創建對象，也許我們需要的對象并不會聲明多個實例，或者不用區分對象的類型，那么我們就可以選擇更簡單的方式。

我們還需要關注構造函數與原型的各自特性，有助于我們在創建對象時準確的判斷我們的屬性與方法到底是放在構造函數中還是放在原型中。如果沒有理解清楚，這會給我們在實際開發中造成非常大的困擾。

最后接下來的幾篇文章，我會挑幾個面向對象的例子，繼續幫助大家掌握面向對象的實際運用。

前端基礎進階系列目錄

GPU云服務器云服務器原型原型鏈原型鏈原型鏈繼承原型鏈圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90547.html

前端基礎進階目錄

摘要：不過其實簡書文章評論里有很多大家的問題以及解答，對于進一步理解文中知識幫助很大的，算是有點可惜吧。不過也希望能夠對正在學習前端的你有一些小幫助。如果在閱讀中發現了一些錯誤，請在評論里告訴我，我會及時更改。前端基礎進階（一）：內存空間詳細圖解前端基礎進階（二）：執行上下文詳細圖解前端基礎進階（三）：變量對象詳解前端基礎進階（四）：詳細圖解作用域鏈與閉包前端基礎進階（五）：全方位...

mo0n1andin 2019-08-21 18:30 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
【前端基礎進階】JS原型、原型鏈、對象詳解

摘要：二構造函數我們先復習一下構造函數的知識上面的例子中和都是的實例。這兩個實例都有一個構造函數屬性，該屬性是一個指針指向。原型鏈其中是對象的實例。一. 普通對象與函數對象 JavaScript 中，萬物皆對象！但對象也是有區別的。分為普通對象和函數對象，Object 、Function 是 JS 自帶的函數對象。下面舉例說明 var o1 = {}; var o2 =new Objec...

explorer_ddf 2019-08-23 15:30 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0

發表評論

登陸后可評論

0條評論

Tony_Zby

男|高級講師

我要關注我要私信

TA的文章

C語言：數組（及冒泡排序）

閱讀 2478·2021-11-16 11:45
Facebook發布新工具，可查找Android應用程序中的安全和隱私漏洞

閱讀 2450·2021-10-11 10:59
字節同事寫了一篇Leetc刷題心得，高管看見之后，直接給他漲了20K，我驚呆了

閱讀 2255·2021-10-08 10:05
搬瓦工：Linux CentOS/Ubuntu/Debian修改設置系統時區教程

閱讀 3834·2021-09-23 11:30
嵌入式軟件崗位就業指導建議！！！

閱讀 2375·2021-09-07 09:58
前端菜鳥筆記 Day-5 CSS 高級

閱讀 805·2019-08-30 15:55
css文本屬性

閱讀 778·2019-08-30 15:53
flex幾種多列布局

閱讀 1927·2019-08-29 17:00

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

前端基礎進階（九）：詳解面向對象、構造函數、原型與原型鏈

一、對象的定義

創建對象

訪問對象的屬性和方法

二、工廠模式

三、構造函數

四、原型

五、原型鏈

六、繼承

七、更好的繼承

八、屬性類型

讀取屬性的特性值

九、總結

相關文章

前端基礎進階目錄

【連載】前端個人文章整理-從基礎到入門

【前端基礎進階】JS原型、原型鏈、對象詳解

SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

發表評論

0條評論

Tony_Zby

男|高級講師

TA的文章

C語言：數組（及冒泡排序）

Facebook發布新工具，可查找Android應用程序中的安全和隱私漏洞

字節同事寫了一篇Leetc刷題心得，高管看見之后，直接給他漲了20K，我驚呆了

搬瓦工：Linux CentOS/Ubuntu/Debian修改設置系統時區教程

嵌入式軟件崗位就業指導建議！！！

前端菜鳥筆記 Day-5 CSS 高級

css文本屬性

flex幾種多列布局

最新活動