原型繼承

原型繼承 (Prototype)

  • javascript 是使用 prototypal inheritance
  • 每個函式都有原型屬性 (prototype property),從它是空物件就誕生了。

原型鍊 (prototype chain)

在這個物件當中建立相同屬性的內容,在執行的時候它會先找物件中最上層的屬性。

classical inheritance VS prototypal inheritance

  • classical inheritance:在類別式語言中,物件是類別的實例 (instance),類別能繼承其他類別。
  • prototypal inheritance:javascript 的物件能直接繼承其他物件。

建立自訂物件

函數建構子 (function constructors)

  • 不建議使用
  • 模仿 classic inheritance 所產生
  • 使用 new 時,可將 this 指向新物件,但若忘記 new 的話,this 則會指向 globel,造成不可預期的結果。
  • 函數建構子是被用來增加新物件的屬性和方法
function Person(){
    this.firstname = 'Default';
    this.lastname = 'Default';
}

Person.prototype.getFullName = function() {
  return this.firstname + " " + this.lastname;
};

var alin = new Person();
// var alin = Person();
alin.firstname = 'ailin';
alin.lastname = 'liou';
console.log(alin);

Object.create

語法

Object.create(proto, [ propertiesObject ])
var Person = {
    firstname: 'Default',
    lastname: 'Default',
    getFullName: function(){
        return this.firstname + " " + this.lastname;
    }
}

/*
Person.getFullName2 = function() {
  return this.firstname + " " + this.lastname;
};
*/

var alin = Object.create(Person);
alin.firstname = 'ailin';
alin.lastname = 'liou';
console.log(alin);

傳遞第二參數

Object.create 能傳遞第二參數,該參數是一個屬性列表,能夠初始化或者添加新對象的屬性,則更加豐富了創建的對象時的靈活性和擴展性。

Object.defineProperty() - JavaScript | MDN

var Person = {
    firstname: 'Default',
    lastname: 'Default',
    getFullName: function(){
        return this.firstname + " " + this.lastname;
    }
}

var student = Object.create(Person, {
    name: {
        value:"xyz",
        writeable: false
    }
});
student.name = "abc";
console.log(student);

delete

var Person = {
    firstname: 'Default',
    lastname: 'Default',
    getFullName: function(){
        return this.firstname + " " + this.lastname;
    }
}

var alin = Object.create(Person);
alin.firstname = 'ailin';
alin.lastname = 'liou';
delete alin.firstname;
console.log(alin.getFullName());

範例

var Calculator = {
    x: 0,
    y: 0,
    add: function(){
        return this.x + this.y;
    },
    sub: function(){
        return this.x - this.y;
    },
    mul: function(){
        return this.x * this.y;
    },
    division: function(){
        return this.x / this.y;
    }
};

var myApp = Object.create(Calculator);

myApp.x = 6;
myApp.y = 2;
myApp.add();

練習題

results for ""

    No results matching ""