成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript面向?qū)ο笾械脑蛡€(gè)人分享

pakolagij / 2933人閱讀

摘要：原型原型是什么所謂原型就是類型對(duì)象的一個(gè)屬性在函數(shù)定義時(shí)就包含了屬性它的初始值是以個(gè)空對(duì)象在中并沒(méi)有定義函數(shù)的原型類型所以原型可以是任何類型原型是用于保存對(duì)象的共享屬性和方法的原型的屬性和方法并不會(huì)影響函數(shù)本身的屬性和方法示例代碼類型的屬性

原型 原型是什么

所謂原型(Prototype)就是Function類型對(duì)象的一個(gè)屬性

在函數(shù)定義時(shí)就包含了prototype屬性,它的初始值是以個(gè)空對(duì)象.在JavaScript中并沒(méi)有定義函數(shù)的原型類型,所以原型可以是任何類型

原型是用于保存對(duì)象的共享屬性和方法的,原型的屬性和方法并不會(huì)影響函數(shù)本身的屬性和方法

示例代碼:

// Function類型的屬性 - 就是所有函數(shù)都具有的屬性
console.log(Function.prototype);
// 定義函數(shù)
function fn() {
    console.log("一花一世界");// 調(diào)用結(jié)果為 [Function]
}
// 原型的默認(rèn)值是空對(duì)象
console.log(fn.prototype);// 調(diào)用結(jié)果為 fn {}


// 函數(shù)包含構(gòu)造函數(shù) - 就是所有引用類型其實(shí)都是構(gòu)造函數(shù)
console.log(Number.prototype);// 調(diào)用結(jié)果為 [Number: 0]

console.log(Object.prototype);// 調(diào)用結(jié)果為 {}

var result = Object.getOwnPropertyDescriptor(Object.prototype,"constructor");
console.log(result);
獲取原型

可以通過(guò)兩種方式獲取原型,從而設(shè)置共享的屬性和方法

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

示例代碼:

function fn() {
    console.log("一花一世界");
}
// 使用訪問(wèn)對(duì)象的屬性語(yǔ)法結(jié)構(gòu)
console.log(fn.prototype);// 調(diào)用結(jié)果為 fn {}
console.log(fn["prototype"]);// 調(diào)用結(jié)果為 fn {}
2. 通過(guò)Object對(duì)象的getPrototypeOf()方法

示例代碼:

// Object類型提供getPrototypeOf()方法
function fn() {
    console.log("一花一世界");
    
console.log(Object.getPrototypeOf(fn));// 調(diào)用結(jié)果為 [Function]
為原型新增屬性或方法

示例代碼:

function fn() {
    console.log("一花一世界");
}
// 變量proto也是一個(gè)空對(duì)象
//var proto = fn.prototype;
//console.log(proto);// 調(diào)用結(jié)果為 fn {}

//新增屬性或方法
// 1. prototype.name = "小燕子";
fn.prototype.name = "小燕子";
console.log(fn.prototype);// 調(diào)用結(jié)果為 fn { name: "小燕子" }

// 2. defineProperty() - 表示定義屬性
Object.defineProperty(fn.prototype,"age",{
    value : 21 + "歲",
    /* 可枚舉 */
    enumerable : true
});
console.log(fn.prototype);// 調(diào)用結(jié)果為 fn { name: "小燕子", age: "21歲" }
構(gòu)造函數(shù)的原型

示例代碼:

// 定義構(gòu)造函數(shù)
function Hero() {
    this.name = "一花一世界";
    this.sayMe = function () {
        console.log("花花世界");
    }
}
// 操作構(gòu)造函數(shù)Hero的原型
Hero.prototype.age = 26;
// 利用構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象
var hero = new Hero();
console.log(hero);// 調(diào)用結(jié)果為 Hero { name: "一花一世界", sayMe: [Function] }
// 為構(gòu)造函數(shù)的原型新增的屬性 - 構(gòu)造函數(shù)創(chuàng)建的對(duì)象中依舊可以訪問(wèn)
console.log(hero.age);// 調(diào)用結(jié)果為 26
// 對(duì)象hero中不存在age屬性
// getOwnPropertyDescriptor - 表示獲取私有屬性描述符
var result = Object.getOwnPropertyDescriptor(hero,"age");
console.log(result);// 調(diào)用結(jié)果為 undefined

代碼分析圖:

自有屬性與原型屬性

自有屬性 - 通過(guò)對(duì)象的引用添加的屬性.其它對(duì)象可能無(wú)此屬性;即使有,也是彼此獨(dú)立的屬性

原型屬性 - 從原型對(duì)象中繼承來(lái)的屬性,一旦原型對(duì)象中屬性值改變,所有繼承自該原型的對(duì)象屬性性均改變

示例代碼:

// 定義構(gòu)造函數(shù)
function Hero(name) {
    // 構(gòu)造函數(shù)本身的屬性 - 自有屬性
    this.name = name;
    this.sayMe = function () {
        console.log("一花一世界");
    }
}
// 通過(guò)構(gòu)造函數(shù)Hero的prototype新增屬性或方法
// 通過(guò)原型所定義的屬性 - 原型屬性
Hero.prototype.age = 26;
/*
    通過(guò)構(gòu)造函數(shù)Hero創(chuàng)建對(duì)象時(shí)
      * 不僅具有構(gòu)造函數(shù)的自有屬性
      * 還具有構(gòu)造函數(shù)的原型屬性
 */
var hero = new Hero("花花世界");

console.log(hero.name);//調(diào)用結(jié)果為 花花世界
console.log(hero.age);//調(diào)用結(jié)果為 26

var hero2 = new Hero("一笑一人生");
console.log(hero2.name);//調(diào)用結(jié)果為 一笑一人生
console.log(hero2.age);//調(diào)用結(jié)果為 26

// 為對(duì)象hero新增age屬性
hero.age = 62;
console.log(hero.age);// 調(diào)用結(jié)果為 62

console.log(hero);// 調(diào)用結(jié)果為 Hero { name: "花花世界", sayMe: [Function], age: 62 }
console.log(hero2.age);//調(diào)用結(jié)果為 26

Hero.prototype.age = 77;

console.log(hero.age);// 調(diào)用結(jié)果為 62
console.log(hero2.age);// 調(diào)用結(jié)果為 77
重寫屬性

通過(guò)構(gòu)造函數(shù)或?qū)ο蟮淖杂袑傩钥梢灾貙懺偷膶傩?/p>

示例代碼:

// 定義構(gòu)造函數(shù)
function Hero() {
    this.name = "花花世界";
}

// 構(gòu)造函數(shù)的原型
Hero.prototype.name = "醉影笑驚鴻";
// 構(gòu)造函數(shù)創(chuàng)建對(duì)象
var hero = new Hero();

// 自有屬性與原型屬性同名時(shí),默認(rèn)訪問(wèn)的是自有屬性 - 自有屬性的優(yōu)先級(jí)別高于原型屬性
console.log(hero.name);// 調(diào)用結(jié)果為 花花世界

// 刪除對(duì)象的屬性 - 刪除的是自有屬性要,因?yàn)樽杂袑傩缘膬?yōu)先級(jí)別高于原型屬性所以需要先刪除自有屬性才能調(diào)用到原型屬性(前提是自有屬性和原型屬性要同名的情況)
delete hero.name;
// 重新訪問(wèn)對(duì)象的屬性
console.log(hero.name);// 調(diào)用結(jié)果為 醉影笑驚鴻

控制臺(tái)效果對(duì)比圖:

檢測(cè)原型屬性

Object.hasOwnProperty(prop)方法

作用 - 判斷當(dāng)前指定屬性是否為自有屬性

參數(shù) - prop - 表示指定屬性名稱

返回值 - 布爾值

true - 表示存在指定的自有屬性

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

使用in關(guān)鍵字檢測(cè)對(duì)象的屬性

作用 - 判斷對(duì)象中是否存在指定屬性(自有屬性或原型屬性)

返回值 - 布爾值

true - 表示存在指定的屬性

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

示例代碼:

function Hero() {
    //this.name = "醉影笑驚鴻"http:// 自有屬性
}

//Hero.prototype.name = "花花世界";

var hero = new Hero();
/*
    Object.hasOwnProperty(prop)方法
      * 作用 - 判斷當(dāng)前指定屬性是否為自有屬性
      * 參數(shù)
        * prop - 表示指定屬性名稱
      * 返回值 - 布爾值
        * true - 表示存在指定的自有屬性
        * false - 表示不存在指定的自有屬性
 */
console.log(hero.hasOwnProperty("name"));
/*
    使用in關(guān)鍵字檢測(cè)對(duì)象的屬性
      * 作用 - 判斷對(duì)象中是否存在指定屬性(自有屬性或原型屬性)
      * 返回值 - 布爾值
        * true - 表示存在指定的屬性
        * false - 表示不存在指定的屬性
 */
console.log("name"in hero);

控制臺(tái)效果對(duì)比圖:

操作原型的方式 1. 利用對(duì)象.屬性或方法的方式新增屬性或方法

示例代碼:

// 定義構(gòu)造函數(shù)
function Hero() {}
// 通過(guò)構(gòu)造函數(shù)的原型新增屬性或方法

Hero.prototype.name = "一花一世界";
Hero.prototype.sayMe = function () {
    console.log("醉影笑驚鴻");
// 通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象
var hero = new Hero();

console.log(hero.name);//調(diào)用結(jié)果為 一花一世界
hero.sayMe();//調(diào)用結(jié)果為 醉影笑驚鴻
2. 將原型重新賦值為一個(gè)新對(duì)象

示例代碼:

// 定義構(gòu)造函數(shù)
function Hero() {}
// 通過(guò)構(gòu)造函數(shù)的原型新增屬性或方法

Hero.prototype = {
    name : "一笑一人生",
    sayMe : function () {
        console.log("極樂(lè)世界");
    }
};

// 通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象
var hero = new Hero();

console.log(hero.name);//調(diào)用結(jié)果為 一笑一人生
hero.sayMe();//調(diào)用結(jié)果為 極樂(lè)世界
顯示原型與隱式原型

所有對(duì)象其實(shí)也具有原型

注意 - 對(duì)象的原型(__proto__)并非是函數(shù)的原型(prototype)

區(qū)分:

將函數(shù)的原型 -> 顯式原型

將對(duì)象的原型 -> 隱式原型

對(duì)象的原型

不能用于真實(shí)開(kāi)發(fā)工作，僅用于邏輯測(cè)試

注意: __proto__屬性只能在調(diào)用時(shí)使用. __proto__屬性與prototype屬性并不等價(jià).

示例代碼:

// 定義構(gòu)造函數(shù)
function Hero() {
    this.name = "皮卡丘";
}

// 通過(guò)構(gòu)造函數(shù)的原型新增屬性或方法
Hero.prototype.age = 26;
// 通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象
var hero = new Hero();

console.log(hero.name);// 對(duì)象調(diào)用自有屬性 結(jié)果為 皮卡丘
console.log(hero.age);// 對(duì)象調(diào)用原型屬性 結(jié)果為 26

/*
    所有對(duì)象其實(shí)也具有原型
    * 注意 - 對(duì)象的原型(__proto__)并非是函數(shù)的原型(prototype)
    * 區(qū)分
      * 將函數(shù)的原型 -> 顯式原型
      * 將對(duì)象的原型 -> 隱式原型
    * 對(duì)象的原型
      * 不能用于真實(shí)開(kāi)發(fā)工作，僅用于邏輯測(cè)試
 */
console.log(hero.prototype);// 調(diào)用結(jié)果為 undefined 表示對(duì)象中不存在該屬性
console.log(hero.__proto__);// 調(diào)用結(jié)果為 Hero { age: 26 }
isPrototypeOf()方法

每個(gè)對(duì)象中都會(huì)具有一個(gè)isPrototypeOf()方法,該方法用來(lái)判斷一個(gè)對(duì)象是否是另一個(gè)對(duì)象的原型

示例代碼:

// 通過(guò)初始化器方式定義對(duì)象
var obj = {
    name : "皮卡丘"
}
// 定義構(gòu)造函數(shù)
function Hero(){}
// 將對(duì)象obj賦值給構(gòu)造函數(shù)Hero的原型
Hero.prototype = obj;
// 通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象
var hero = new Hero();
// 判斷指定對(duì)象是否是另一個(gè)對(duì)象的原型
var result = obj.isPrototypeOf(hero);

console.log(result);// 調(diào)用結(jié)果為 true - 表示是另一個(gè)對(duì)象的原型
擴(kuò)展內(nèi)置對(duì)象

通過(guò)原型擴(kuò)展內(nèi)置對(duì)象的屬性和方法非常靈活, 根據(jù)個(gè)性化要求定制JavaScript語(yǔ)言的具體內(nèi)容

注意: 一般不建議使用這種方式,如果JavaScript的版本更新時(shí)可能會(huì)提供個(gè)性化的屬性或方法,會(huì)導(dǎo)致沖突

示例代碼:

Object.prototype.sayMe = function(){
    console.log("一花一世界");
}
// 通過(guò)Object構(gòu)造函數(shù)創(chuàng)建對(duì)象
var obj = new Object();

obj.sayMe();// 調(diào)用結(jié)果為 一花一世界


Array.prototype.inArray = function(color){
    // this - 表示當(dāng)前的數(shù)組
    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("red"));// 調(diào)用結(jié)果為 true
console.log(arr.inArray("yellow"));// 調(diào)用結(jié)果為 false
擴(kuò)展內(nèi)置對(duì)象補(bǔ)充

示例代碼:

/* 定義對(duì)象原型屬性 */
Object.defineProperty(Object.prototype, "sayMe", {
    /* 函數(shù)方法 */
    value : function(){
        /* 函數(shù)體 */
        console.log("一花一世界");
    }
});
/* 定義變量并賦值新創(chuàng)建的對(duì)象 */
var obj = new Object();
/* 調(diào)用創(chuàng)建的函數(shù)屬性 */
obj.sayMe();// 調(diào)用結(jié)果為 一花一世界

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108279.html

相關(guān)文章

  • JavaScript面向對(duì)象中的繼承個(gè)人分享

    摘要：繼承原型鏈所謂言行鏈就是如果構(gòu)造函數(shù)或?qū)ο蟮脑椭赶驑?gòu)造函數(shù)或?qū)ο蟮脑驮僦赶驑?gòu)造函數(shù)或?qū)ο笠源祟愅谱罱K的構(gòu)造函數(shù)或?qū)ο蟮脑l(xiāng)指向的原型由此形成一條鏈狀結(jié)構(gòu)被稱之為原型鏈?zhǔn)纠a原型鏈通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象將的原型指向?qū)ο笸ㄟ^(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象 繼承 原型鏈 所謂言行鏈就是如果構(gòu)造函數(shù)或?qū)ο驛,A的原型指向構(gòu)造函數(shù)或?qū)ο驜,B的原型再指向構(gòu)造函數(shù)或?qū)ο驝,以此類推,最終的構(gòu)造函數(shù)或?qū)ο蟮脑?..

    Coly 評(píng)論0 收藏0

  • JavaScript面向對(duì)象中的嚴(yán)格模式個(gè)人分享

    摘要：嚴(yán)格模式嚴(yán)格模式的概念所謂嚴(yán)格模式就是對(duì)中的一種限制性更強(qiáng)的方式屬于代碼的一種強(qiáng)制規(guī)則來(lái)規(guī)范代碼的格式簡(jiǎn)單的說(shuō)就是必須按照嚴(yán)格模式的規(guī)則書(shū)寫代碼否則就會(huì)報(bào)錯(cuò)嚴(yán)格模式修正了一些引擎難以優(yōu)化的錯(cuò)誤同樣的代碼有些時(shí)候嚴(yán)格模式會(huì)比非嚴(yán)格模式下更加快 嚴(yán)格模式 嚴(yán)格模式的概念 所謂嚴(yán)格模式就是對(duì)JavaScript中的一種限制性更強(qiáng)的方式. 屬于代碼的一種強(qiáng)制規(guī)則,來(lái)規(guī)范代碼的格式簡(jiǎn)單的說(shuō)就是...

    lordharrd 評(píng)論0 收藏0

  • 【重溫基礎(chǔ)】15.JS對(duì)象介紹

    摘要：構(gòu)造函數(shù)通常首字母大寫，用于區(qū)分普通函數(shù)。這種關(guān)系常被稱為原型鏈，它解釋了為何一個(gè)對(duì)象會(huì)擁有定義在其他對(duì)象中的屬性和方法。中所有的對(duì)象，都有一個(gè)屬性，指向?qū)嵗龑?duì)象的構(gòu)造函數(shù)原型由于是個(gè)非標(biāo)準(zhǔn)屬性，因此只有和兩個(gè)瀏覽器支持，標(biāo)準(zhǔn)方法是。 從這篇文章開(kāi)始，復(fù)習(xí) MDN 中級(jí)教程 的內(nèi)容了，在初級(jí)教程中，我和大家分享了一些比較簡(jiǎn)單基礎(chǔ)的知識(shí)點(diǎn)，并放在我的 【Cute-JavaScript】系...

    booster 評(píng)論0 收藏0

  • JS對(duì)象(1)重新認(rèn)識(shí)面向對(duì)象

    摘要：對(duì)象重新認(rèn)識(shí)面向?qū)ο竺嫦驅(qū)ο髲脑O(shè)計(jì)模式上看，對(duì)象是計(jì)算機(jī)抽象現(xiàn)實(shí)世界的一種方式。除了字面式聲明方式之外，允許通過(guò)構(gòu)造器創(chuàng)建對(duì)象。每個(gè)構(gòu)造器實(shí)際上是一個(gè)函數(shù)對(duì)象該函數(shù)對(duì)象含有一個(gè)屬性用于實(shí)現(xiàn)基于原型的繼承和共享屬性。 title: JS對(duì)象(1)重新認(rèn)識(shí)面向?qū)ο? date: 2016-10-05 tags: JavaScript 0x00 面向?qū)ο?從設(shè)計(jì)模式上看，對(duì)象是...

    superw 評(píng)論0 收藏0

  • JavaScript面向對(duì)象中的Array類型個(gè)人分享

    摘要：類型檢測(cè)數(shù)組示例代碼調(diào)用結(jié)果為方法作用用于判斷當(dāng)前對(duì)象的數(shù)據(jù)類型結(jié)果特點(diǎn)可以準(zhǔn)確判斷出當(dāng)前變量的類型調(diào)用結(jié)果為調(diào)用結(jié)果為報(bào)錯(cuò)調(diào)用結(jié)果為調(diào)用結(jié)果為方法判斷指定類型是否出現(xiàn)在當(dāng)前對(duì)象的原型鏈中調(diào)用結(jié)果為轉(zhuǎn)換數(shù)組提供了兩種方法用于數(shù)組的轉(zhuǎn) Array類型 檢測(cè)數(shù)組 示例代碼: var arr = [1,2,3,4,5]; console.log(arr instanceof Array);/...

    KnewOne 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<