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

js中this的指向問題歸納總結(jié)

 更新時間:2018年11月28日 16:24:07   作者:FinGet  
最近發(fā)現(xiàn)在對JS的學(xué)習(xí)中有很多朋友對this的指向問題還是有很大的誤區(qū)或者說只是大致了解,但是一旦遇到復(fù)雜的情況就會因為this指向問題而引發(fā)各種bug。所以這篇文章主要給大家介紹了關(guān)于js中this的指向問題的相關(guān)資料,需要的朋友可以參考下

前言

js中this指向問題是個老生常談的問題了,下面這篇文章再來給大家介紹下,大家可以看看,更深入的了解了解,下面話不多說了,來一起看看詳細(xì)的介紹吧

this

this:上下文,會根據(jù)執(zhí)行環(huán)境變化而發(fā)生指向的改變.

1.單獨的this,指向的是window這個對象

alert(this); // this -> window

2.全局函數(shù)中的this

function demo() {
 alert(this); // this -> window
}
demo();

在嚴(yán)格模式下,this是undefined.

function demo() {
 'use strict';
 alert(this); // undefined
}
demo();

3.函數(shù)調(diào)用的時候,前面加上new關(guān)鍵字

所謂構(gòu)造函數(shù),就是通過這個函數(shù)生成一個新對象,這時,this就指向這個對象。

function demo() {
 //alert(this); // this -> object
 this.testStr = 'this is a test';
}
let a = new demo();
alert(a.testStr); // 'this is a test'

4.用call與apply的方式調(diào)用函數(shù)

function demo() {
 alert(this);
}
demo.call('abc'); // abc
demo.call(null); // this -> window
demo.call(undefined); // this -> window

5.定時器中的this,指向的是window

setTimeout(function() {
 alert(this); // this -> window ,嚴(yán)格模式 也是指向window
},500)

6.元素綁定事件,事件觸發(fā)后,執(zhí)行的函數(shù)中的this,指向的是當(dāng)前元素

window.onload = function() {
 let $btn = document.getElementById('btn');
 $btn.onclick = function(){
 alert(this); // this -> 當(dāng)前觸發(fā)
 }
}

7.函數(shù)調(diào)用時如果綁定了bind,那么函數(shù)中的this指向了bind中綁定的元素

window.onload = function() {
 let $btn = document.getElementById('btn');
 $btn.addEventListener('click',function() {
 alert(this); // window
 }.bind(window))
}

8.對象中的方法,該方法被哪個對象調(diào)用了,那么方法中的this就指向該對象

let name = 'finget'
let obj = {
 name: 'FinGet',
 getName: function() {
 alert(this.name);
 }
}
obj.getName(); // FinGet
---------------------------分割線----------------------------
let fn = obj.getName;
fn(); //finget this -> window

騰訊筆試題

var x = 20;
var a = {
 x: 15,
 fn: function() {
 var x = 30;
 return function() {
  return this.x
 }
 }
}
console.log(a.fn());
console.log((a.fn())());
console.log(a.fn()());
console.log(a.fn()() == (a.fn())());
console.log(a.fn().call(this));
console.log(a.fn().call(a));

答案

1.console.log(a.fn());

對象調(diào)用方法,返回了一個方法。

# function() {return this.x}

2.console.log((a.fn())());

a.fn()返回的是一個函數(shù),()()這是自執(zhí)行表達(dá)式。this -> window

# 20

3.console.log(a.fn()());

a.fn()相當(dāng)于在全局定義了一個函數(shù),然后再自己調(diào)用執(zhí)行。this -> window

# 20

4.console.log(a.fn()() == (a.fn())());

# true

5.console.log(a.fn().call(this));

這段代碼在全局環(huán)境中執(zhí)行,this -> window

# 20

6.console.log(a.fn().call(a));

this -> a

# 15

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

相關(guān)文章

  • 使用原生JS實現(xiàn)拍照功能

    使用原生JS實現(xiàn)拍照功能

    今天我們聊一聊,一個非常有趣且重要的問題,如何用原生js實現(xiàn)拍照功能?這時候,有的朋友會說,為什么要用原生js實現(xiàn)呀,這么麻煩還要自己動腦子,直接用第三方庫多好呀,但是,你難道不好奇它的底層js實現(xiàn)嗎?感興趣的同學(xué)跟著小編一起來瞧瞧吧
    2023-12-12
  • JavaScript中promise.all和promise.race的區(qū)別詳解

    JavaScript中promise.all和promise.race的區(qū)別詳解

    Promise.all和Promise.race是JavaScript的兩種Promise處理方法,Promise.all要求所有Promise對象成功完成才返回成功,若有一個失敗則整體失敗,Promise.race返回第一個完成的Promise結(jié)果,需要的朋友可以參考下
    2024-09-09
  • 微信小程序?qū)崿F(xiàn)Timeline時間線效果

    微信小程序?qū)崿F(xiàn)Timeline時間線效果

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)Timeline時間線效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • 微信小程序點擊view動態(tài)添加樣式過程解析

    微信小程序點擊view動態(tài)添加樣式過程解析

    這篇文章主要介紹了微信小程序點擊view動態(tài)添加樣式過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-01-01
  • js window.event對象詳盡解析

    js window.event對象詳盡解析

    最近因為工作需要,弄了好多天的js了,老婆一問我在弄 ajax, 一問我在弄js,她都聽得沒有一點興趣了,我自己感覺還好,畢竟做出來了東西就有成就感吧,這里把幾個有用但是不常見的東西貼出來供大家參考參考
    2009-02-02
  • elementUI 設(shè)置input的只讀或禁用的方法

    elementUI 設(shè)置input的只讀或禁用的方法

    這篇文章主要介紹了elementUI 設(shè)置input的只讀或禁用的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-10-10
  • iframe的父子窗口之間的對象相互調(diào)用基本用法

    iframe的父子窗口之間的對象相互調(diào)用基本用法

    iframe在使用時可能會涉及到父子窗口之間傳值和方法的相互調(diào)用,研究了一下其實非常簡單,就那么幾個用法而已,在此與大家分享下,感興趣的朋友可以參考下
    2013-09-09
  • js?實現(xiàn)div拖拽拉伸完整示例

    js?實現(xiàn)div拖拽拉伸完整示例

    這篇文章主要為大家介紹了js?實現(xiàn)div拖拽拉伸完整示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • JS實現(xiàn)隨機(jī)生成10個手機(jī)號的方法示例

    JS實現(xiàn)隨機(jī)生成10個手機(jī)號的方法示例

    這篇文章主要介紹了JS實現(xiàn)隨機(jī)生成10個手機(jī)號的方法,涉及javascript數(shù)值運算與隨機(jī)數(shù)操作相關(guān)使用技巧,需要的朋友可以參考下
    2018-12-12
  • js求數(shù)組最大值的八種具體實現(xiàn)方法

    js求數(shù)組最大值的八種具體實現(xiàn)方法

    數(shù)組如何求最大值,想必很多的朋友都不會吧,下面這篇文章主要給大家介紹了關(guān)于使用js求數(shù)組最大值的八種方法具體實現(xiàn)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
    2023-09-09

最新評論