JavaScript第九天筆記（原型）

aervon 發(fā)布于2019-08-26 12:14 / 3492人閱讀

摘要：而原型就是類型對(duì)象的一個(gè)屬性。在中并沒有定義函數(shù)的原始類型，所以原型可以是任何類型。原型是用于保存對(duì)象的共享屬性和方法的，原型的屬性和方法并不會(huì)影響函數(shù)本身的屬性和放大。

原型概述

在JavaScript中，函數(shù)是一個(gè)包含屬性和方法的Function類型的對(duì)象。而原型（Prototype）就是Function類型對(duì)象的一個(gè)屬性。
在函數(shù)定義時(shí)九包含了prototype屬性，他的初始值是一個(gè)空對(duì)象。在JavaScript中并沒有定義函數(shù)的原始類型，所以原型可以是任何類型。
原型是用于保存對(duì)象的共享屬性和方法的，原型的屬性和方法并不會(huì)影響函數(shù)本身的屬性和放大。

獲取原型

1.通過構(gòu)造函數(shù)的prototype屬性

function fn(){
    console.log("this is function");
}
console.log(fn.prototype);

2.通過Object對(duì)象的getgetPrototypeOf()方法

function fn(){
    console.log("this is function");
}
console.log(Object.getPrototypeOf(fn));

為原型新增屬性或方法

構(gòu)造函數(shù).prototype.屬性名 = 屬性值
構(gòu)造函數(shù).prototype.方法名 = function(){}

構(gòu)造函數(shù).prototype = {
屬性名:屬性值,
方法:function(){}

}

構(gòu)造函數(shù)的原型

/*定義構(gòu)造函數(shù)*/
function Fun(){
    this.name = "segment";
    this.sayMe = function(){
        console.log("this is function");
    }
}
//操作構(gòu)造函數(shù)Fun的原型
Fun.prototype.age = 18;
// 利用構(gòu)造函數(shù)來創(chuàng)建對(duì)象
var fun = new Fun();
console.log(fun);
// 為構(gòu)造函數(shù)的原型新增的屬性 -> 構(gòu)造函數(shù)創(chuàng)建的對(duì)象中依舊可以訪問
console.log(fun.age);// 18
// 對(duì)象fun中不存在age屬性
var result = Object.getOwnPropertyDescriptor(fun, "age");
console.log(result);

自有屬性和原型屬性

自有屬性：構(gòu)造函數(shù)本身的屬性
原型屬性：通過原型所定義的屬性

function Mingzi （name）{
      this .name = name;
      this .sayMe = function(){
      console .log("this is function")
      }
}
Mingzi.prototype.age = 18;
var mingzi = new Hero("石原");

console.log(mingzi.name);// 石原
console.log(mingzi.age);// 18

var mingzi2 = new Mingzi("長澤雅嗎");
console.log(mingzi2.name);// 長澤雅美
console.log(mingzi2.age);// 18
Hero.prototype.age = 80;

console.log(mingzi.age);
console.log(mingzi2.age);

重寫屬性

通過構(gòu)造函數(shù)或?qū)ο蟮淖杂袑傩钥梢灾貙懺偷膶傩?br>自有屬性與原型屬性同名時(shí)，默認(rèn)訪問的是自有屬性

// 定義構(gòu)造函數(shù)
function Hero(){
    this.name = "張無忌";
}
// 構(gòu)造函數(shù)的原型
Hero.prototype.name = "周芷若";
// 構(gòu)造函數(shù)創(chuàng)建對(duì)象
var hero = new Hero();
console.log(hero.name);// 張無忌

// 刪除對(duì)象的屬性
delete hero.name;
// 重新訪問對(duì)象的屬性
console.log(hero.name);// 周芷若

檢測原型的屬性

Object.hasOwnProperty(prop)方法
作用 - 判斷當(dāng)前指定屬性是否為自有屬性
參數(shù)1.prop - 表示指定屬性名稱

2.返回值 - 布爾值
  true - 表示存在指定的自有屬性
  false - 表示不存在指定的自有屬性

使用in關(guān)鍵字檢測對(duì)象的屬性
作用 - 判斷對(duì)象中是否存在指定屬性(自有屬性或原型屬性)
返回值 - 布爾值

 true - 表示存在指定的屬性
 false - 表示不存在指定的屬性

顯示原型與隱式原型

每個(gè)函數(shù)function都有一個(gè)prototype，即顯式原型
每個(gè)實(shí)例對(duì)象都有一個(gè)__proto__，可稱為隱式原型
對(duì)象的隱式原型的值為其對(duì)應(yīng)構(gòu)造函數(shù)的顯式原型的值
函數(shù)的prototype屬性: 在定義函數(shù)時(shí)自動(dòng)添加的, 默認(rèn)值是一個(gè)空Object對(duì)象
對(duì)象的__proto__屬性: 創(chuàng)建對(duì)象時(shí)自動(dòng)添加的, 默認(rèn)值為構(gòu)造函數(shù)的prototype屬性值
我們能直接操作顯式原型, 但不能直接操作隱式原型