javascript:this

ShevaKuilin 發布于2019-08-21 10:45 / 2815人閱讀

摘要：關于是函數內部的一個特殊對象引用的是函數據以執行的環境對象在調用函數前的值并不確定不同的調用方式會導致值的改變。這兩個方法的用途都是在特定的作用域中調用函數，實際上等于設置函數體內對象的值。

關于this

this是函數內部的一個特殊對象,this引用的是函數據以執行的環境對象,在調用函數前this的值并不確定,不同的調用方式會導致this值的改變。
可結合這篇文章理解環境對象的概念

window.num = 22;
var o = {num: 11};
function sayNum(){
    alert(this.num)
}
sayNum();//22
o.sayNum = sayNum;
o.sayNum();//11

記住：函數名僅僅是一個包含指針的變量而已。因此即使是在不同的環境中執行，全局的sayNum()函數與o.sayNum()指向的仍然是同一個函數。

1.全局作用域中調用函數時

全局作用域中調用，this對象引用的是window
匿名函數的執行具有全局性，因此其this對象通常也指向window

function fn1(){
    console.log(this);
}

fn1();

2.通過new操作符調用

this引用的是實例對象

function Person(name){
    this.name = name;
}
Person.prototype.printName = function(){
    alert(this.name);//Byron
};

var p1 = new Person("Byron");

3.作為對象的方法調用

this引用的是該對象

var obj1 = {
    name: "Byron",
    fn : function(){
        console.log(this);
    }
};

obj1.fn();

4.間接調用 call和apply

每個函數都包含兩個非繼承而來的方法：call()和apply()。這兩個方法的用途都是在特定的作用域中調用函數，實際上等于設置函數體內this對象的值。也就是說，直接調用函數，調用時指定執行環境是誰

window.color = "red";
var o = {color: "blue"};
function sayColor(){
    alert(this.color);
}
sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue

1.apply方法

接收兩個參數，一個是在函數中運行函數的作用域，另一個是參數數組。

2.call方法

call方法與apply方法相同，區別在于接收參數的方式不同，對于call方法而言，第一個參數是this值沒有變化，變化的是其余參數都直接傳遞給函數。

function fn(){
     console.log(this)//windwow
     function InnerFn(){
          console.log(this)
     }
     InnerFn.call(this)//window
}
fn();

  function fn0(){
     console.log(this)//window
}
function fn1(){
     fn0.call(this);
     console.log(this);//window
}
fn1();

function fn0(){
 console.log(this)//object
}
var o = {
    fn1: function fn1(){
        fn0.call(this);
        console.log(this);//object
    }
}
o.fn1();

bind方法

這個方法會創建一個函數的實例，其this值會被綁定到傳給bind()函數的值。也就是說會返回一個新函數，并且使函數內部的this為傳入的第一個參數

window.color = "red";
var o = {color : "blue"};
function sayColor(){
    alert(this.color)
}
var objectSayColor = sayColor.bind(o);
objectSayColor();//blue

GPU云服務器云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86128.html

JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
JavaScript中的this陷阱的最全收集--沒有之一

摘要：提及的精髓，閉包作用域鏈函數是當之無愧的。博客的標題是中的陷阱的最全收集沒有之一，很顯然這篇博客闡述的是。這是造成很多不熟悉的人深陷陷阱的根源。你應該避免在構造函數里面返回任何東西，因為這可能代當有人問起你JavaScript有什么特點的時候，你可能立馬就想到了單線程、事件驅動、面向對象等一堆詞語，但是如果真的讓你解釋一下這些概念，可能真解釋不清楚。有句話這么說：如果你不能向一個6歲...

KitorinZero 2019-08-21 10:28 評論0 收藏0
我對JavaScript中this的一些理解

摘要：匿名函數的執行環境具有全局性，因此它的對象通常指向。如果對此有疑惑，可以看知乎上的答案知乎匿名函數的指向為什么是作為對象方法的調用，指向該對象當函數作為某個對象的方法調用時，就指這個函數所在的對象。因為日常工作中經常使用到this，而且在JavaScript中this的指向問題也很容易讓人混淆一部分知識。這段時間翻閱了一些書籍也查閱了網上一些資料然后結合自己的經驗，為了能讓自...

focusj 2019-08-23 15:23 評論0 收藏0
理解 JavaScript call()/apply()/bind()

摘要：理解文章中已經比較全面的分析了在中的指向問題，用一句話來總結就是的指向一定是在執行時決定的，指向被調用函數的對象。與和直接執行原函數不同的是，返回的是一個新函數。這個新函數包裹了原函數，并且綁定了的指向為傳入的。理解 JavaScript this 文章中已經比較全面的分析了 this 在 JavaScript 中的指向問題，用一句話來總結就是：this 的指向一定是在執行時決定的，...

duan199226 2019-08-23 14:27 評論0 收藏0
javascript code style

javascript代碼風格來源：https://github.com/airbnb/javascript Objects 對象 javascript// bad var item = new Object(); // good var item = {}; //不要使用保留字作為對象屬性，IE8不支持。 // bad var superman = { default: { cla...

objc94 2019-08-21 10:29 評論0 收藏0
理解 JavaScript this

摘要：回調函數在回調函數中的指向也會發生變化。在閉包回調函數賦值等場景下我們都可以利用來改變的指向，以達到我們的預期。文章參考系列文章理解閉包理解執行棧理解作用域理解數據類型與變量原文發布在我的公眾號，點擊查看。這是本系列的第 5 篇文章。還記得上一篇文章中的閉包嗎？點擊查看文章理解 JavaScript 閉包。在聊 this 之前，先來復習一下閉包： var name = Nei...

zombieda 2019-08-23 14:10 評論0 收藏0