javascript:this

ShevaKuilin 發(fā)布于2019-08-21 10:45 / 2865人閱讀

摘要：關于是函數(shù)內(nèi)部的一個特殊對象引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對象在調(diào)用函數(shù)前的值并不確定不同的調(diào)用方式會導致值的改變。這兩個方法的用途都是在特定的作用域中調(diào)用函數(shù)，實際上等于設置函數(shù)體內(nèi)對象的值。

關于this

this是函數(shù)內(nèi)部的一個特殊對象,this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對象,在調(diào)用函數(shù)前this的值并不確定,不同的調(diào)用方式會導致this值的改變。
可結合這篇文章理解環(huán)境對象的概念

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

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

1.全局作用域中調(diào)用函數(shù)時

全局作用域中調(diào)用，this對象引用的是window
匿名函數(shù)的執(zhí)行具有全局性，因此其this對象通常也指向window

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

fn1();

2.通過new操作符調(diào)用

this引用的是實例對象

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

var p1 = new Person("Byron");

3.作為對象的方法調(diào)用

this引用的是該對象

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

obj1.fn();

4.間接調(diào)用 call和apply

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

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方法

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

2.call方法

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

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方法

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

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

云服務器 GPU云服務器

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/86128.html

JavaScript深入淺出

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

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

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

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

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

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

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

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

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

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