【JavaScript】面向對象之原型

JS(JavaScript)
一.原型
1.歸納

• 原型是什麼

Function對象包含數學方法的函數，函數定義在protoype屬性，初始值爲一個空對象
原型的屬性和方法不會影響函數自身的屬性和方法

// Function類型的屬性 -> 全部函數都具備的屬性
console.log(Function.prototype);
// 定義函數
function fn(){
    console.log('this is function');
}
// 原型的默認值是空對象
console.log(fn.prototype);
// 函數包含構造函數 -> 全部引用類型其實都是構造函數
console.log(Number.prototype);
console.log(Object.prototype);
var result = Object.getOwnPropertyDescriptor(Object.prototype, 'constructor');
console.log(result);

• 獲取原型

經過兩種方式，來設置共存的屬性和方法
構造函數的prototype屬性
Object對象的getPrototype

function fn(){
    console.log('this is function');
}
// 使用訪問對象的屬性語法結構
console.log(fn.prototype);
console.log(fn['prototype']);
// Object類型提供getPrototypeOf()方法
console.log(Object.getPrototypeOf(fn));

• 原型的屬性和方法

經過一下兩種方式
單獨定義原型的屬性和方法
直接型定義個新對象

function fn(){
    console.log('this is function');
}
// 變量proto也是一個空對象
// var proto = fn.prototype;

// 新增屬性或方法
// proto.name = '犬夜叉';
fn.prototype.name = '犬夜叉';
console.log(fn.prototype);
// defineProperty()
Object.defineProperty(fn.prototype, 'age', {
    value : 18,
    enumerable : true
});
console.log(fn.prototype);

2.原型屬性

• 自有屬性與原型屬性

自有屬性；對象引用增長屬性，獨立的屬性函數自己的屬性
原型屬性；經過新增屬性和方法並定義原型的屬性

// 定義構造函數
function Hero(name){
    // 構造函數自己的屬性 -> 自有屬性
    this.name = name;
    this.sayMe = function(){
        console.log('this is function');
    }
}
// 經過構造函數Hero的prototype新增屬性或方法
// 經過原型所定義的屬性 -> 原型屬性
Hero.prototype.age = 18;
/*
    經過構造函數Hero建立對象時
    * 不只具備構造函數的自有屬性
    * 還具備構造函數的原型屬性
 */
var hero = new Hero('犬夜叉');

console.log(hero.name);// 犬夜叉
console.log(hero.age);// 16

var hero2 = new Hero('桔梗');
console.log(hero2.name);// 桔梗
console.log(hero2.age);// 16
// 爲對象hero新增age屬性
// hero.age = 80;
// console.log(hero.age);// 80
//
// console.log(hero);
//
// console.log(hero2.age);// 16

Hero.prototype.age = 80;

console.log(hero.age);
console.log(hero2.age);

• 檢測自有或原型屬性

有兩種方式以hasOwnPrototype()來檢測對象是否指定自有屬性
以in關鍵字檢測對象及原型鏈是否有屬性

function Hero(){
    // this.name = '犬夜叉';// 自有屬性
}
// Hero.prototype.name = '桔梗';

var hero = new Hero();
/*
  Object.hasOwnProperty(prop)方法
  判斷當前指定屬性是否爲自有屬性
  
  prop - 表示指定屬性名稱
  返回值 - 布爾值
  true - 表示存在指定的自有屬性
  false - 表示不存在指定的自有屬性
 */
// console.log(hero.hasOwnProperty('name'));// true
/*
  使用in關鍵字檢測對象的屬性
  做用 - 判斷對象中是否存在指定屬性(自有屬性或原型屬性)
  返回值 - 布爾值
  true - 表示存在指定的屬性
  false - 表示不存在指定的屬性
 */
console.log('name' in hero);

• 擴展屬性或方法

以原型設置指定構造函數和對象擴展其屬性和方法

Object.prototype.sayMe = function () {
    console.log('you my sayMe function')
}
var obj = new Object();

obj.sayMe();

Array.prototype.inArray = function (color) {

    for(var i = 0, len = this.length; i < len; i++){
        if(this[i] === color){
            return true;
        }
    }
    return false;
}
var arr = ["red", "green","blue"];
console.log(arr.inArray("yellow"));
console.log(arr.inArray("red"));

• 重寫原型屬性

將構造函數和對象，以自有屬性重寫遠得屬性

//定義構造函數
function Hero() {
    this.name = '犬夜叉'
}
Hero.prototype.name = '桔梗';
//構造函數原型
var hero = new Hero();
// 構造函數建立對象
console.log(hero.name);//犬夜叉
//自有屬性與原型屬性同名，默認訪問是自有屬性，自有屬性優先級別高於原型屬性
delete hero.name;
//刪除對象屬性
console.log(hero.name);//桔梗
//從新訪問對象屬性

• isPrototypeOF()方法

//經過初始化方式定義對象
var obj = {
    name : '犬夜叉'
}
function Hero() {}
//定義構造函數
Hero.prototype = obj;
//將對象obj賦值給構造函數Hero原型
var hero = new Hero();
//經過構造函數建立對象
var result = obj.isPrototypeOf(hero);
//判斷指定對象是不是另外一個對象原型
console.log(result);

3.擴展內建對象
內置對象的prototype屬性設置擴展屬性和方法

Object.prototype.sayMe = function () {
    console.log('you my sayMe function')
}
var obj = new Object();

obj.sayMe();

Array.prototype.inArray = function (color) {

    for(var i = 0, len = this.length; i < len; i++){
        if(this[i] === color){
            return true;
        }
    }
    return false;
}
var arr = ["red", "green","blue"];
console.log(arr.inArray("yellow"));
console.log(arr.inArray("red"));