JS學習（三）—— 對象

對象簡介

       對象是javascript的基本數據類型。對象其實是無序屬性的集合，其屬性可以包含基本值，對象或者函數。我們可以通過編程對 對象的屬性進行增加和刪除。但是javascript的對象屬性並沒有公有私有的概念。

參考文章：https://www.cnblogs.com/Yellow-ice/p/10439386.html

1. this關鍵字

        this是JavaScript語言的一個關鍵字。它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用。如果對this關鍵字不瞭解，很容易在多層嵌套的編程中混淆this所指向的對象，從而導致程序的錯誤。隨着函數使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this指的是，調用函數的那個對象。

例如：

var point = {
    x : 0,
    y : 0,
    moveTo : function(x, y) {
        this.x += x;
        this.y += y;
    }
};

// 此時我們是通過point對象來調用的moveTo函數，所以moveTo函數裏的this指向的就是point
point.moveTo(10, 10);
console.log("x: " + point.x + " y: " + point.y);  // 輸出：x: 10 y: 10

 

2.對的創建

1. 直接創建

在es5中並沒有class，class關鍵字在es6中才真正可以使用。而在es5中可以直接使用花括號創建對象實例，這種方式創建對象簡單直接，但是當需要生成大量某相同對象的實例的時候就會有大量的冗餘代碼：

var obj = {};    // 創建一個對象obj

// 直接創建對象實例
var man = {
    name : "張三",
    age: 21,
    sayHello: function() {
        console.log("Hello，我是張三");
    }

}

 

2. 工廠模式

使用工程模式產生一個對象，這種模式其實是一個設計模式，抽象了創建具體對象的過程，主要是通過在函數內部創建一個對象，爲其添加屬性和方法，並將對象返回，從而實現創建多個對象的目的，所以叫做工廠模式：

// 工廠模式
function createObj(name, description) {
    var o = new Object();
    o.name = name;
    o.description = description;
    o.showDescription = function() {
        console.log(this.description);
    };
    return o;
}

// 使用工廠模式創建實例
var obj1 = createObj("Car", "我是一輛車");
var obj2 = createObj("Plane", "我是一架飛機");

console.log(typeof obj1);   // 輸出  object

 

3. 寄生模式

這種模式其實和工廠模式很像，除了使用new操作符並把使用的包裝函數叫做構造函數之外，和工廠模式可以說是一模一樣的。

function SpecialArray() {
    var values = new Array();
    values.push.apply(values, argumens);
    values.toPipedString = function() {
        return this.join("|");
    }
    return values;
}

var colors = new SpecialArray("red","blue");
console.log(colors.toPipedString());  //  red|blue

4. prototype模式（原型模式）

我們都知道，每個函數都有一個prototype(需要深究)屬性，這個屬性是一個指針，指向一個對象，而這個對象就是原型對象，包含了所有實例共享的屬性和方法，如果我們要創建的對象需要共享屬性和方法。

function Person() {
}

// 使用prototype模式直接給屬性初始化默認值
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.sayName = function() {
    console.log(this.name);
}

var person1 = new Person();
var person2 = new Person();
person1.sayName();  //  Nicholas
person2.sayName();  //  Nicholas

5. 穩妥模式

因爲js沒有私有的概念，穩妥模式下的對象屬性是私有的，看例子，talk is cheap, show you the code!

// 穩妥模式下的對象屬性是私有的 
function Person(name, age) {
    var o = new Object();
    _name = name;
    _age = age;
    o.sayName = function() {
        return _name;
    }
    return o;
}

var person1 = Person("Nicholas", 29);
person1.sayName();  //  Nicholas
console.log(person1._name);

運行結果：

6. ES6中的class模式（推薦）

ES6中添加了class關鍵字，它的出現使得對象編程變得更清晰更具有結構性，更加的符合面向對象的編程思想。與java等純面向對象的語言一樣，es6中的類還可以繼承。

// 使用class關鍵字
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayName() {
        console.log(this.name);
    }
}

// 但此時的person的屬性並不是私有的
var person1 = new Person("Nicholas", 29);
person1.sayName();  //  輸出Nicholas

class Chinese extends Person {
    construct(name, age, color){
        this.$super(name, age); this.color = color;
    }
}

var cn = new Chinese("張三", 19, "yellow");
cn.sayName();      //張三
console.log(cn.color);   // undefined