JavaScript:萬(wàn)惡的this拿命來(lái)（二）

fox_soyoung 發(fā)布于2019-08-22 10:56 / 710人閱讀

摘要：構(gòu)造函數(shù)對(duì)于被實(shí)例化的，我們稱之為構(gòu)造函數(shù)，及使用關(guān)鍵字調(diào)用的，對(duì)于它們來(lái)說(shuō)，會(huì)被改變，指向?qū)嵗?。上栗子全局賦上屬性通過(guò)關(guān)鍵字創(chuàng)建實(shí)例，改變函數(shù)內(nèi)部指向注解通過(guò)這個(gè)栗子，我們可以看出，通過(guò)創(chuàng)建構(gòu)造函數(shù)的實(shí)例，使得的指向改變，指向了實(shí)例本身。

用栗子說(shuō)this

  Bug年年有，今年特別多

  對(duì)于JavaScript這么靈活的語(yǔ)言來(lái)說(shuō)，少了this怎么活！

function 函數(shù) this

對(duì)于沒(méi)有實(shí)例化的function，我們稱之為函數(shù)，即沒(méi)有用new關(guān)鍵字調(diào)用的函數(shù)，對(duì)它們來(lái)說(shuō)，this一律指代全局。

上栗子

var position = "outer";               

function test(){
    position = "inner";           
}

console.log(this.position);     // outer   
test();
console.log(this.position);     // inner

原因：內(nèi)部未用var聲明發(fā)生“變量提升”，污染全局變量。

構(gòu)造函數(shù) this

對(duì)于被實(shí)例化的function，我們稱之為構(gòu)造函數(shù)，及使用new關(guān)鍵字調(diào)用的function，對(duì)于它們來(lái)說(shuō)，this會(huì)被改變，指向?qū)嵗?

上栗子

var name = "person";               // 全局this賦上屬性name

function Person(name){
    this.name = name;

    this.say = function () {
        console.log("My name is "+this.name);
    }

    this.show = function () {
        console.log(this);
    }
}


var william = new Person("william"); //通過(guò)new關(guān)鍵字創(chuàng)建實(shí)例，改變函數(shù)內(nèi)部this指向

console.log(this.name);          //person

william.say();                   //My name is william

william.show();                  //Person {name: "william", say: ...


注解：通過(guò)這個(gè)栗子，我們可以看出，通過(guò)創(chuàng)建構(gòu)造函數(shù)的實(shí)例，使得this的指向改變，指向了實(shí)例本身。

原型對(duì)象 this

每一個(gè)函數(shù)對(duì)象在創(chuàng)建的時(shí)候，都會(huì)自動(dòng)添加一個(gè)prototype屬性，這個(gè)prototype其實(shí)是一個(gè)指針，指向這個(gè)函數(shù)的原型對(duì)象。

你可以通過(guò)prototype指針給這個(gè)函數(shù)對(duì)象的原型對(duì)象添加屬性，在實(shí)例化函數(shù)對(duì)象后，可以通過(guò)this來(lái)訪問(wèn)原型對(duì)象上的屬性。

上栗子

function Person(){
    console.log(this.name);
}

Person.prototype.name = "william";    //給原型對(duì)象上賦name屬性

var person = new Person();            // 通過(guò)this.name訪問(wèn)原型對(duì)象上的屬性，打印 "william"

這還不夠，咱們?yōu)楹瘮?shù)對(duì)象直接添加同名，而不在原型對(duì)象上添加

function Person(){
    this.name = "Jack";
    console.log(this.name);
}

Person.prototype.name = "william";

var person = new Person();           // 打印 "Jack"

這里有一個(gè)值得注意的地方：

  當(dāng)你構(gòu)造函數(shù)中存在和原型對(duì)象中同名的屬性或方法時(shí)，原型對(duì)象中的屬性或方法會(huì)被隱藏，你只會(huì)訪問(wèn)到構(gòu)造函數(shù)中的屬性或方法`

Object.create this

通過(guò)Object.create創(chuàng)建函數(shù)對(duì)象實(shí)例，而不使用new關(guān)鍵字，也就是說(shuō)它不會(huì)去調(diào)用構(gòu)造函數(shù)

上栗子

function Person(name){    
    this.name = name;               
    this.showName = function () {
        console.log(this.name + " in constructor");
    }
} //在構(gòu)造函數(shù)中的屬性和方法，均同名

Person.prototype.name = "jack";
Person.prototype.showName = function () {
    console.log(this.name + " in prototype");
};
  //在原型對(duì)象中的屬性和方法，均同名

var william  = new Person("william");
var jack = Object.create(Person.prototype);

william.showName();  // william in constructor

jack.showName();     // jack in prototype


注解：
 - 使用new關(guān)鍵字創(chuàng)造的實(shí)例調(diào)用了構(gòu)造函數(shù)的屬性和方法
 - 使用Object.create創(chuàng)造的實(shí)例調(diào)用了原型對(duì)象的屬性和方法

原型鏈 this

原型鏈用于實(shí)現(xiàn)繼承，當(dāng)沒(méi)有找到需要屬性或方法時(shí)，會(huì)順著原型鏈向上繼續(xù)尋找。

上栗子

function Father(){
    this.name = "father";
}                              //可以看做"父類"
Father.prototype.showName = function () {
    console.log(this.name);
};

function Son(){
    this.name = "son";
}                              //可以看做"子類"
Son.prototype = new Father();  //這步是關(guān)鍵！

var mike = new Son();
mike.showName();               // son

注解：
 - 首先要強(qiáng)調(diào)的是JavaScript中沒(méi)有"父類","子類","繼承"這樣的東西，我們只是通過(guò)原型鏈來(lái)實(shí)現(xiàn)這樣的設(shè)計(jì)模式。

 - 通過(guò)這一步
     Son.prototype = new Father();
   我們將"子類"的prototype指針指向了"父類"函數(shù)對(duì)象

設(shè)計(jì)模式：繼承

 為什么這樣就能實(shí)現(xiàn)繼承呢？

 首先要想明白為什么實(shí)例能訪問(wèn)構(gòu)造函數(shù)的原型對(duì)象

 在JavaScript中，有一個(gè)內(nèi)部的屬性，在火狐，谷歌瀏覽器中，將這個(gè)內(nèi)部屬性暴露了出來(lái)，就是它 __proto__

上栗子(瀏覽器中)

mike.__proto__ // Father {name: "father", showName: function}    
Son.prototype  //Father {name: "father", showName: function}

mike.__proto__ === Son.prototype  // true

通過(guò)這個(gè)內(nèi)部屬性，我們可以訪問(wèn)到實(shí)例的構(gòu)造函數(shù)的原型對(duì)象

再來(lái)一枚(瀏覽器中)

mike.__proto__.__proto__      //Father {showName: function}
Father.prototype              //Father {showName: function}

mike.__proto__.__proto__ === Father.prototype  // true

我們現(xiàn)在通過(guò)__proto__訪問(wèn)到了"父類"的原型對(duì)象！
繼承得以實(shí)現(xiàn)！

補(bǔ)充一句：

我們可以訪問(wèn)到Son的name屬性的值，卻訪問(wèn)不到Father的name屬性的值，是因?yàn)? - mike是Son的實(shí)例(實(shí)例能做什么...?)
 - Father中的name沒(méi)有對(duì)外開(kāi)放，可以看做是私有屬性

總結(jié)

主要探討了
- function作為函數(shù)、構(gòu)造函數(shù)、原型對(duì)象時(shí)，this的指代情況
- 擴(kuò)展了另一種實(shí)例化方式Object.create
- 細(xì)說(shuō)了原型鏈原理和實(shí)現(xiàn)，模擬了繼承的設(shè)計(jì)模式

云服務(wù)器 GPU云服務(wù)器拿命來(lái) javascript的this javaScript中的this javascript中this詳解

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

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

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

登陸后可評(píng)論

0條評(píng)論

fox_soyoung

男|高級(jí)講師

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

TA的文章

Vultr機(jī)房測(cè)評(píng) - Vultr美國(guó)亞特蘭大Atlanta機(jī)房綜合速度和線路去程回程測(cè)

閱讀 3781·2021-08-30 09:47
Web前端開(kāi)發(fā)流程

閱讀 3718·2019-08-30 15:56
Codepen 每日精選（2018-3-30）

閱讀 684·2019-08-30 14:18
div水平居中和垂直居中

閱讀 704·2019-08-29 16:17
讓IE兼容background-size的方法_background-size ie下使用

閱讀 2071·2019-08-29 11:07
原生js實(shí)現(xiàn)trigger方法

閱讀 649·2019-08-26 13:53
30秒就能理解的 Javascript 代碼片段 --- Array篇

閱讀 3456·2019-08-26 10:26
console中的%d %s等占位符

閱讀 2502·2019-08-23 18:30

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

資訊專欄INFORMATION COLUMN

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

JavaScript:萬(wàn)惡的this拿命來(lái)（二）

相關(guān)文章

JavaScript:萬(wàn)惡的this拿命來(lái)（一）

JavaScript:萬(wàn)惡的 this 拿命來(lái)（三）

設(shè)計(jì)模式之狀態(tài)模式

不用 Spring Security 可否？試試這個(gè)小而美的安全框架

異步流程控制：7 行代碼學(xué)會(huì) co 模塊

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

0條評(píng)論

fox_soyoung

男|高級(jí)講師

TA的文章

Vultr機(jī)房測(cè)評(píng) - Vultr美國(guó)亞特蘭大Atlanta機(jī)房綜合速度和線路去程回程測(cè)

Web前端開(kāi)發(fā)流程

Codepen 每日精選（2018-3-30）

div水平居中和垂直居中

讓IE兼容background-size的方法_background-size ie下使用

原生js實(shí)現(xiàn)trigger方法

30秒就能理解的 Javascript 代碼片段 --- Array篇

console中的%d %s等占位符

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

JavaScript:萬(wàn)惡的this拿命來(lái)（二）

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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