iT邦幫忙

0

JS 原始型別的包裹物件與原型的關聯 DAY67

var b = new String('abcdef'); // 這裡 String 為建構函式
console.log(b);
console.dir(String); // 也有 prototype 此屬性
String.prototype.lastText = function(){
    return this[this.length - 1];
}
console.log(b.lastText()); // f
Number.prototype.secondpower = function(){
    return this * this;
}
var num = 5;
console.log(num.secondpower()); // 25

日期

var date = new Date();
console.log(date);
console.dir(Date);
Date.prototype.getFullDate = function(){
    var day = this.getDate();
    var month = this.getMonth()+1;
    var year = this.getFullYear();
    var today = year + '/' + month + '/' + day;
    return today;
}
console.log(date.getFullDate());

使用 Object.create 建立多層繼承

我們要如何在原型鍊上新增一個層級呢??
我們上一篇有提到

function Dog(nickname , color , size){
    this.nickname = nickname;
    this.color = color;
    this.size = size;
}
var black = new Dog('小黑','黑色','大'); 
console.log(black);
// Object -> Dog -> black(實體)
// Object -> Animal -> Dog -> black(實體)
// Object -> Animal -> Cat -> black(實體)

這裡我們先來介紹 Object.create
Object.create 可以把 物件 作為原型使用

var black = {
    nickname: '小黑',
    color: '黑色',
    size: '大',
    bark: function(){
        console.log(this.nickname + '吠叫');
    }
}
var white = Object.create(black);
console.log(white); // {}
console.log(white.nickname); // 小黑
white.nickname = '小白';
console.log(white.nickname); // 小白
// 所以在不改變屬性的情況下
// white 的值都可以 以 black 作為預設值

這裡在舉一個完整例子

function Animal(family){
    this.kingdom = '動物界';
    this.family = family || '人科';
}
Animal.prototype.move = function(){
    console.log( this.nickname + '移動' );
}
function Dog(nickname,color,size){
    this.nickname = nickname;
    this.color = color || '白色';
    this.size = size || '小';
}
Dog.prototype = Object.create(Animal.prototype); // Dog的原型繼承Animal的原型
Dog.prototype.bark = function(){
    console.log(this.nickname + '吠叫');
}
var black = new Dog('小黑','黑色','大');
console.log(black);
console.log(black.family); // undefined
black.bark();
black.move();

不過會發現我們的科別與動物界都沒有顯示(undefined)
是因為 Dog 只有繼承 Animal 的原型
並沒有繼承 Animal 的建構函式
所以改成這樣

function Animal(family){
    this.kingdom = '動物界';
    this.family = family || '人科';
}
Animal.prototype.move = function(){
    console.log( this.nickname + '移動' );
}
function Dog(nickname,color,size){
    Animal.call(this,'犬科');
    this.nickname = nickname;
    this.color = color || '白色';
    this.size = size || '小';
}
Dog.prototype = Object.create(Animal.prototype); // Dog的原型繼承Animal的原型
Dog.prototype.bark = function(){
    console.log(this.nickname + '吠叫');
}
var black = new Dog('小黑','黑色','大');
console.log(black);
console.log(black.family); // undefined
black.bark();
black.move();

不過這裡還有一個小問題
black 目前的 constructor 為 Animal
這裡簡單說明一下 constructor
constructor: 使用建構函式產生一個物件,則物件內的constructor會指向原本的建構函式
所以 black 的 constructor 應該為 Dog
那為什麼它原本的 constructor 是 Animal呢??
因為

Dog.prototype = Object.create(Animal.prototype);

這行覆蓋掉它了
所以必須把它補回來

function Animal(family){
    this.kingdom = '動物界';
    this.family = family || '人科';
}
Animal.prototype.move = function(){
    console.log( this.nickname + '移動' );
}
function Dog(nickname,color,size){
    Animal.call(this,'犬科');
    this.nickname = nickname;
    this.color = color || '白色';
    this.size = size || '小';
}
Dog.prototype = Object.create(Animal.prototype); // Dog的原型繼承Animal的原型
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function(){
    console.log(this.nickname + '吠叫');
}
var black = new Dog('小黑','黑色','大');
console.log(black);
console.log(black.family); // undefined
black.bark();
black.move();

console.log(black.constructor); // Dog 的建構函式

這裡我們在加上貓的物種

function Animal(family){
    this.kingdom = '動物界';
    this.family = family || '人科';
}
Animal.prototype.move = function(){
    console.log( this.nickname + '移動' );
}
function Dog(nickname,color,size){
    Animal.call(this,'犬科');
    this.nickname = nickname;
    this.color = color || '白色';
    this.size = size || '小';
}
Dog.prototype = Object.create(Animal.prototype); // Dog的原型繼承Animal的原型
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function(){
    console.log(this.nickname + '吠叫');
}
var black = new Dog('小黑','黑色','大');
console.log(black);
console.log(black.family); // undefined
black.bark();
black.move();

function Cat(nickname,color,size){
    Animal.call(this,'貓科');
    this.nickname = nickname;
    this.color = color;
    this.size = size;
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.meow = function(){
    console.log(this.nickname + '喵喵叫');
}
var kitty = new Cat('凱蒂','白色','大');
kitty.meow();
kitty.move();

那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷/images/emoticon/emoticon41.gif


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言