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

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

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

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

原型是什么

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

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

獲取原型

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

function fn(){
    console.log("this is function");
}
// 使用訪問(wèn)對(duì)象的屬性語(yǔ)法結(jié)構(gòu)
console.log(fn.prototype);
console.log(fn["prototype"]);
// Object類型提供getPrototypeOf()方法
console.log(Object.getPrototypeOf(fn));

原型的屬性和方法

通過(guò)一下兩種方式
多帶帶定義原型的屬性和方法
直接型定義個(gè)新對(duì)象

function fn(){
    console.log("this is function");
}
// 變量proto也是一個(gè)空對(duì)象
// 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.原型屬性

自有屬性與原型屬性

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

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

檢測(cè)自有或原型屬性

有兩種方式以hasOwnPrototype()來(lái)檢測(cè)對(duì)象是否指定自有屬性
以in關(guān)鍵字檢測(cè)對(duì)象及原型鏈?zhǔn)欠裼袑傩?/p>

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

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

擴(kuò)展屬性或方法

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

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

重寫(xiě)原型屬性

將構(gòu)造函數(shù)和對(duì)象，以自有屬性重寫(xiě)遠(yuǎn)得屬性

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

isPrototypeOF()方法

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

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

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

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

登陸后可評(píng)論

0條評(píng)論

Cristalven

男|高級(jí)講師

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

TA的文章

程序員的悲哀是什么？

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

閱讀 1356·2021-11-17 09:33
通過(guò)css3動(dòng)畫(huà)和opacity透明度實(shí)現(xiàn)呼吸燈效果

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

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

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

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

相關(guān)文章

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

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

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

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

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

面向對(duì)象的 JavaScript

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

0條評(píng)論

Cristalven

男|高級(jí)講師

TA的文章

程序員的悲哀是什么？

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

通過(guò)css3動(dòng)畫(huà)和opacity透明度實(shí)現(xiàn)呼吸燈效果

css常用布局

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

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

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