【JavaScript】面向?qū)ο笾?

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

摘要：一原型概括原型是什么對象包含數(shù)學方法的函數(shù)，函數(shù)定義在屬性，初始值為一個空對象原型的屬性和方法不會影響函數(shù)自身的屬性和方法類型的屬性所有函數(shù)都具有的屬性定義函數(shù)原型的默認值是空對象函數(shù)包含構(gòu)造函數(shù)所有引用類型其實都是構(gòu)造函數(shù)獲取原型通過

JS(JavaScript)
一.原型
1.概括

原型是什么

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

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

獲取原型

通過兩種方式，來設(shè)置共存的屬性和方法
構(gòu)造函數(shù)的prototype屬性
Object對象的getPrototype

function fn(){
    console.log("this is function");
}
// 使用訪問對象的屬性語法結(jié)構(gòu)
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.原型屬性

自有屬性與原型屬性

自有屬性；對象引用增加屬性，獨立的屬性函數(shù)本身的屬性
原型屬性；通過新增屬性和方法并定義原型的屬性

// 定義構(gòu)造函數(shù)
function Hero(name){
    // 構(gòu)造函數(shù)本身的屬性 -> 自有屬性
    this.name = name;
    this.sayMe = function(){
        console.log("this is function");
    }
}
// 通過構(gòu)造函數(shù)Hero的prototype新增屬性或方法
// 通過原型所定義的屬性 -> 原型屬性
Hero.prototype.age = 18;
/*
    通過構(gòu)造函數(shù)Hero創(chuàng)建對象時
    * 不僅具有構(gòu)造函數(shù)的自有屬性
    * 還具有構(gòu)造函數(shù)的原型屬性
 */
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關(guān)鍵字檢測對象及原型鏈是否有屬性

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

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

擴展屬性或方法

以原型設(shè)置指定構(gòu)造函數(shù)和對象擴展其屬性和方法

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"));

重寫原型屬性

將構(gòu)造函數(shù)和對象，以自有屬性重寫遠得屬性

//定義構(gòu)造函數(shù)
function Hero() {
    this.name = "犬夜叉"
}
Hero.prototype.name = "桔梗";
//構(gòu)造函數(shù)原型
var hero = new Hero();
// 構(gòu)造函數(shù)創(chuàng)建對象
console.log(hero.name);//犬夜叉
//自有屬性與原型屬性同名，默認訪問是自有屬性，自有屬性優(yōu)先級別高于原型屬性
delete hero.name;
//刪除對象屬性
console.log(hero.name);//桔梗
//重新訪問對象屬性

isPrototypeOF()方法

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

3.擴展內(nèi)建對象
內(nèi)置對象的prototype屬性設(shè)置擴展屬性和方法

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"));

GPU云服務(wù)器云服務(wù)器 javascript 面向?qū)ο?/a> javascript面向?qū)ο?/a> javascript面向?qū)ο缶幊?/a> javascript面向?qū)ο缶幊讨改?/a>

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108277.html

發(fā)表評論

登陸后可評論

0條評論

Cristalven

男|高級講師

我要關(guān)注我要私信

TA的文章

程序員的悲哀是什么？

閱讀 920·2021-11-25 09:43
軟件測試剛?cè)胄斜乜矗?測試基本流程、測試用例全在這里

閱讀 1293·2021-11-17 09:33
通過css3動畫和opacity透明度實現(xiàn)呼吸燈效果

閱讀 3010·2019-08-30 15:44
css常用布局

閱讀 3310·2019-08-29 17:16
“位置”在css里的細節(jié)

閱讀 480·2019-08-28 18:20
taro的坑：子組件的默認屬性和父組件中修改子組件樣式問題以及應(yīng)用復(fù)雜數(shù)據(jù)

閱讀 1635·2019-08-26 13:54
js各種方法繼承以及優(yōu)缺點

閱讀 552·2019-08-26 12:14
【JavaScript】面向?qū)ο笾?/a>

閱讀 2174·2019-08-26 12:14

【JavaScript】面向?qū)ο笾?

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

相關(guān)文章

SegmentFault 技術(shù)周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

SegmentFault 技術(shù)周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

SegmentFault 技術(shù)周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

**面向對象的JavaScript之繼承(一) 類式繼承**

javascript面向對象之“多態(tài)”

面向對象的 JavaScript

發(fā)表評論

0條評論

Cristalven

男|高級講師

TA的文章

程序員的悲哀是什么？

軟件測試剛?cè)胄斜乜矗?測試基本流程、測試用例全在這里

通過css3動畫和opacity透明度實現(xiàn)呼吸燈效果

css常用布局

“位置”在css里的細節(jié)

taro的坑：子組件的默認屬性和父組件中修改子組件樣式問題以及應(yīng)用復(fù)雜數(shù)據(jù)

js各種方法繼承以及優(yōu)缺點