欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js中this對(duì)象用法分析

 更新時(shí)間:2018年01月05日 09:10:43   投稿:laozhang  
這篇文章主要介紹了js中this對(duì)象用法的詳細(xì)分析,需要的朋友學(xué)習(xí)分享下吧。

this對(duì)象是在函數(shù)運(yùn)行時(shí),基于函數(shù)的執(zhí)行環(huán)境綁定的。

其實(shí)這句話的本質(zhì)就是,誰(shuí)調(diào)用了函數(shù),this就指向誰(shuí)

具體的來(lái)說(shuō),通常有以下幾種情況:

全局函數(shù)

在全局環(huán)境中,this指向Window

//例子1
 function A() {
 console.log(this)
 }
 A();//Window

上面的例子很簡(jiǎn)單,函數(shù)A在全局環(huán)境中執(zhí)行,也就是全局對(duì)象Window調(diào)用了函數(shù)。此時(shí)this指向Window

對(duì)象方法

作為對(duì)象方法調(diào)用時(shí),this指向調(diào)用該方法的對(duì)象

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

到這里我們舉的例子都比較簡(jiǎn)單易懂,接下來(lái)來(lái)一個(gè)有意思的:

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

這個(gè)例子和前一個(gè)例子不一樣,運(yùn)行c.getFunc()時(shí),首先返回的是一個(gè)匿名函數(shù),我們將這個(gè)函數(shù)賦值給cFun,接著在全局環(huán)境中調(diào)用了cFun(),所以此時(shí)this指向的還是Window。

如果我們一定要讓這里返回的是c對(duì)象呢?在開頭我們說(shuō)過(guò),this對(duì)象是在函數(shù)執(zhí)行時(shí)確定的,在例子3中,執(zhí)行c.getFunc()時(shí),this對(duì)象指向的還是c,所以我們只要保持住這個(gè)this就好了,對(duì)上面的代碼稍微改動(dòng):

//例子4
 var c = {
 getFunc:function(){
  var that = this //在這里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

這也就是我們經(jīng)??梢栽谝恍┐a中看到var self = this或者var that = this之類的原因了。

call和apply

此時(shí)this對(duì)象通常指向函數(shù)中指定的this值(注意這里的通常2字,考試要考的)

call和apply算是老生常談,但還是稍微介紹下,怕新同學(xué)可能沒接觸過(guò)(其實(shí)是為了湊點(diǎn)字?jǐn)?shù)),拿call來(lái)說(shuō),語(yǔ)法是這樣的

fun.call(thisArg, arg1, arg2, ...)

這個(gè)方法怎么用呢,看下面的例子:

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:'e'//(給e寫個(gè)`name`屬性只是因?yàn)橛X得孤零零的太難看了~~)
}
d.getThis.call(e)//e

在這里我們就可以看出call函數(shù)的意思了:指定一個(gè)對(duì)象o1去調(diào)用其他對(duì)象o2的方法,此時(shí)this對(duì)象指向o1

好了,那為什么前面我們說(shuō)通常呢?因?yàn)?,這里的thisArg是可以指定為null和undefined的。請(qǐng)看:

//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

此時(shí)的this指向全局對(duì)象Window

箭頭函數(shù)

es6中的箭頭函數(shù)現(xiàn)在也用的比較頻繁,但是有個(gè)需要注意的點(diǎn)是:

函數(shù)體內(nèi)的this對(duì)象,就是定義時(shí)所在的對(duì)象,而不是使用時(shí)所在的對(duì)象。

其實(shí)出現(xiàn)這種情況的根本原因是:箭頭函數(shù)沒有this對(duì)象,所以箭頭函數(shù)的this就是外層代碼的this

//例子7
 var f = {
  getThis:()=>{
   console.log(this)
  }
 }
 f.getThis()//Window

這個(gè)例子和前面例子2是基本一樣的,只是把普通函數(shù)改寫成箭頭函數(shù),但是此時(shí)的this對(duì)象已經(jīng)指向了外層的Window。

考慮到這一點(diǎn)可能不好理解,我們?cè)倏磶讉€(gè)例子:

//例子8
 var g = {
 getThis:function(){
  return function(){console.log(this)}
 }
 }
 var h = {
 getThis:function(){
  return ()=> console.log(this)
 }
 }
 g.getThis()()//Window
 h.getThis()()//h

這個(gè)例子里,g的getThis寫法就和之前的例子3一樣,由于函數(shù)在全局環(huán)境中運(yùn)行,所以此時(shí)this指向Window;h的getThis使用了箭頭函數(shù),所以this指向了外層代碼塊的this所以,此時(shí)this指向的是h。

總結(jié)

一般情況下this對(duì)象指向調(diào)用函數(shù)的對(duì)象,全局環(huán)境中執(zhí)行函數(shù)this對(duì)象指向Window

在call和apply函數(shù)中this指向指定的對(duì)象,如果指定的對(duì)為undefined或者null,那么this對(duì)象指向Window

在箭頭函數(shù)中,this對(duì)象等同于外層代碼塊的this

然后依然是每次都一樣的結(jié)尾,如果內(nèi)容有錯(cuò)誤的地方歡迎指出;如果對(duì)你有幫助,歡迎點(diǎn)贊和收藏,感謝你對(duì)腳本之家的支持。

  • 整理的比較不錯(cuò)的JavaScript的方法和技巧

    整理的比較不錯(cuò)的JavaScript的方法和技巧

    整理的比較不錯(cuò)的JavaScript的方法和技巧...
    2007-02-02
  • JavaScript學(xué)習(xí)筆記之內(nèi)置對(duì)象

    JavaScript學(xué)習(xí)筆記之內(nèi)置對(duì)象

    本文主要介紹了javascript中的內(nèi)置對(duì)象,包括圖像對(duì)象、導(dǎo)航對(duì)象、窗口對(duì)象、屏幕對(duì)象、事件對(duì)象、歷史對(duì)象、文件對(duì)象(重要)、錨點(diǎn)對(duì)象、鏈接對(duì)象、框架對(duì)象、表單對(duì)象(重要)、位置對(duì)象,這里簡(jiǎn)單做下介紹,后續(xù)在詳細(xì)講解。
    2015-01-01
  • js 頁(yè)面輸出值

    js 頁(yè)面輸出值

    下面的方法是常用的向html頁(yè)面中輸入值,一般是將要輸出的內(nèi)容放到別的js文件中,調(diào)用。這里只是測(cè)試。
    2008-11-11
  • 用js判斷頁(yè)面是否加載完成實(shí)現(xiàn)代碼

    用js判斷頁(yè)面是否加載完成實(shí)現(xiàn)代碼

    用document.onreadystatechange的方法來(lái)監(jiān)聽狀態(tài)改變, 然后用document.readyState == “complete”判斷是否加載完成,需要的朋友可以參考下
    2012-12-12
  • JS 面向?qū)ο笾^承---多種組合繼承詳解

    JS 面向?qū)ο笾^承---多種組合繼承詳解

    下面小編就為大家?guī)?lái)一篇JS 面向?qū)ο笾^承---多種組合繼承詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-07
  • 淺析js中2個(gè)等號(hào)與3個(gè)等號(hào)的區(qū)別

    淺析js中2個(gè)等號(hào)與3個(gè)等號(hào)的區(qū)別

    這篇文章介紹了js中2個(gè)等號(hào)與3個(gè)等號(hào)的區(qū)別,有需要的朋友可以參考一下
    2013-08-08
  • 刪除重復(fù)數(shù)據(jù)的算法

    刪除重復(fù)數(shù)據(jù)的算法

    刪除重復(fù)數(shù)據(jù)的算法...
    2006-11-11
  • javascript學(xué)習(xí)筆記(二) js一些基本概念

    javascript學(xué)習(xí)筆記(二) js一些基本概念

    javascript學(xué)習(xí)筆記之js一些基本概念,學(xué)習(xí)js的朋友可以參考下
    2012-06-06
  • 詳解JavaScript對(duì)W3C DOM模版的支持情況

    詳解JavaScript對(duì)W3C DOM模版的支持情況

    這篇文章主要介紹了詳解JavaScript對(duì)W3C DOM模版的支持情況,在JS前端編程的兼容性方面可作參考使用,需要的朋友可以參考下
    2015-06-06
  • 最新評(píng)論