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

資訊專欄INFORMATION COLUMN

[Javascript實(shí)驗(yàn)課] What is this?

RyanHoo / 878人閱讀

摘要：實(shí)驗(yàn)一全局下的全局作用域下的函數(shù)里面的，顯然等于全局對象所以，顯然，可以通過，改變里面的全局變量所以，如果你創(chuàng)建了一個(gè)構(gòu)造函數(shù)，然后不小心調(diào)用了它，那么相當(dāng)于你為全局對象賦值了，這個(gè)缺陷可以通過里面的來解決。

javascript 中的關(guān)鍵詞 this 代指 執(zhí)行上下文（Execution Contexts），函數(shù)作用域中的this，理解上來說是指調(diào)用這個(gè)函數(shù)的對象。相信以下幾個(gè)實(shí)驗(yàn)可以加深對this關(guān)鍵字的理解。

實(shí)驗(yàn)一：全局下的this

全局作用域下的函數(shù)里面的this，顯然等于全局對象window

function test(){
  console.log(this === window) //true
}
test()

所以，顯然，可以通過this，改變window里面的全局變量

var global = "global"

function test(){

  this.global = "global2"

}
test()
console.log(global)//global2

所以，如果你創(chuàng)建了一個(gè)構(gòu)造函數(shù)，然后不小心調(diào)用了它，那么相當(dāng)于你為全局對象賦值了，這個(gè)缺陷可以通過ES5里面的"use strict"來解決。

"use strict";

var global = "global"

function test(){
  console.log(this)//undefined
  this.global = "global2"http://TypeError because "this" undefined

}
test();

嚴(yán)格模式下,全局模式下的函數(shù)內(nèi)部的this為undefined，而不會(huì)默認(rèn)為window

實(shí)驗(yàn)二 : 對象中的this

通過普通對象聲明的函數(shù)this

var myobject = {
  foo : function(){
    console.dir(this) //myobject
  }
}
myobject.foo()

foo里面的this指向調(diào)用foo的對象myobject，這個(gè)對象里面只有一個(gè)方法foo，因此我們可以通過this操作 指向?qū)ο?里的其他值

var myobject = {
  v : 5,
  foo :  function(){
        this.v ++
        console.log(this.v)//6
   } 
}

myobject.foo()

多層對象的情況下，this指向最近的一個(gè)對象，即誰直接調(diào)用這個(gè)函數(shù)，誰是this

var myobject = {
  foo : {
    bar : function(){
        console.dir(this)//foo
    }
  }

}
myobject.foo.bar()

以上情況this指向foo對象，那么我們再考慮如下的情況

var myobject = {
  foo : function(){
    console.dir(this)//myobject
    var bar = function(){
      console.dir(this)/*window "use strict" undefined*/
    }
    bar()
  }
}
myobject.foo()

我們可以發(fā)現(xiàn)，如果在foo函數(shù)里聲明新的函數(shù)（閉包），比如綁定事件，settimeout里的匿名函數(shù)等情況，這里面的this會(huì)變?yōu)閣indow（嚴(yán)格模式下undefined）。
造成這個(gè)錯(cuò)誤的原因是，bar()調(diào)用的時(shí)候，是全局對象window在調(diào)用的它，而不是通過myobject調(diào)用（換句話說myobject里面壓根就沒有bar），這種情況下如果要通過myobject調(diào)用bar需要用到call或apply

var myobject = {
  foo : function(){
    console.log(this)//myobject
    var bar = function(){
      console.log(this)
    }   

    bar.call(myobject)//myobject
  }

}
myobject.foo()

理解為，函數(shù)中的this，跟調(diào)用時(shí)的情形有關(guān)。

構(gòu)造函數(shù)通過new來賦值情形也跟對象類似，比如

function testobject(){
  this.kk = 6;
  this.dd = function(){console.log(this)};
}

var fish = new testobject
fish.dd();

/*
[object Object] {
  dd: function (){window.runnerWindow.proxyConsole.log(this)},
  kk: 6
}
*/

new操作符會(huì)將this指向構(gòu)造函數(shù)構(gòu)造出來的對象

實(shí)驗(yàn)三：事件回調(diào)里的this 
var myobject = {
  foo : function(){
    console.log(this)//myobject

    document.body.onclick = function(){
      console.dir(this)//[object HTMLBodyElement]
    }
  }
}
myobject.foo()

點(diǎn)擊回調(diào)里的this指向點(diǎn)擊對象

總結(jié)：解決辦法

為避免this混亂，可以采用下面幾種方法

通過變量傳遞 
var myobject = {
  foo : function(){
    var that = this   
    document.body.onclick = function(){
      console.dir(that)//myobject
    }
  }
}
myobject.foo()
通過call或apply 
var myobject = {
  foo : function(){
    var bar = function(){
      console.log(this)
    }   

    bar.call(myobject)//myobject
  }

}
myobject.foo()
直接用對象名代替this 
var myobject = {
  v : 5,
  foo : function(){
    var bar = function(){
      console.log(++myobject.v)//直接修改myobject對象里的值
    }   
    bar();
  }

}
myobject.foo()
更多相關(guān)請參考

http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

http://javascript.ruanyifeng.com/oop/basic.html

https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Operators/this#Function_context_.E5.87.BD.E6.95.B0.E4.B8.8A.E4.B8.8B.E6.96.87

http://ryanmorr.com/understanding-scope-and-context-in-javascript/

http://stackoverflow.com/questions/9468055/what-does-new-in-javascript-do-anyway

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

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

相關(guān)文章

  • ECMASCript 2019可能會(huì)有哪些特性？

    摘要：可能不會(huì)包括所有的語法提案。事實(shí)上，有些提案已經(jīng)被擱置很多年了。因此，很可能也會(huì)在今年月份發(fā)布。 譯者按： 又過了1年... 原文：Whats New in JavaScript for 2019 譯者: Fundebug 為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。 最近這些年，ECMASCript標(biāo)準(zhǔn)發(fā)展節(jié)奏非常穩(wěn)定，每年都會(huì)發(fā)布新的特...

    tuantuan 評論0 收藏0

  • [譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

    摘要：一般來說，聲明式編程關(guān)注于發(fā)生了啥，而命令式則同時(shí)關(guān)注與咋發(fā)生的。聲明式編程可以較好地解決這個(gè)問題，剛才提到的比較麻煩的元素選擇這個(gè)動(dòng)作可以交托給框架或者庫區(qū)處理，這樣就能讓開發(fā)者專注于發(fā)生了啥，這里推薦一波與。 本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。 繼續(xù)譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...

    roadtogeek 評論0 收藏0

  • JavaScript選擇題解答（1-20）

    摘要：最近做了個(gè)上的的測試題目地址，錯(cuò)了一大堆，感覺的概念還有很多不是很清晰，這里記錄一下個(gè)人博客文章地址第一題解答這里考的是的用法。如果出現(xiàn)的數(shù)字不符合后面輸入的進(jìn)制，則為，所以第二個(gè)值為。 最近做了個(gè)heroku上的JavaScript的測試（題目地址），錯(cuò)了一大堆，感覺js的概念還有很多不是很清晰，這里記錄一下 個(gè)人博客文章地址 第一題 What is the result of...

    Worktile 評論0 收藏0

  • Learning Notes - Understanding the Weird Parts of

    摘要：標(biāo)簽前端作者更多文章個(gè)人網(wǎng)站 Learning Notes - Understanding the Weird Parts of JavaScript 標(biāo)簽 ： 前端 JavaScript [TOC] The learning notes of the MOOC JavaScript: Understanding the Weird Parts on Udemy,including...

    inapt 評論0 收藏0

  • JavaScript Getters and Setters

    For the most part, in JavaScript, what you see is what you get. A value’s a value; there are no tricks. Sometimes however, you want a value that’s based on some other values: someone’s full name, for ...

    warnerwu 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<