JavaScript中的this指向總結

lavnFan 發(fā)布于2019-08-26 13:39 / 1572人閱讀

摘要：其中和在傳入要綁定的指向時，立即執(zhí)行。需要注意的是，當使用改變函數(shù)內(nèi)部的指向時如果傳入的不是一個對象，會調(diào)用相對的構造函數(shù)，進行隱式類型裝換。

關于javascript中this指向的總結 瀏覽器環(huán)境

在全局作用域中，this的指向是window對象

console.log(this);
//Window對象
console.log(this === window);
//true

ES5函數(shù)中this的指向

在非嚴格模式下,函數(shù)中的this指向window對象，因為此時函數(shù)fn是window的一個屬性，所以運行fn時，fn中的this指向window。其實this的指向就是指向函數(shù)的運行時環(huán)境。

var fn = function () {
    console.log(this);
    console.log(this === window);
}
fn(); 
//Window對象
//true

在嚴格模式下，若不使用window調(diào)用函數(shù)，函數(shù)中的this指向undefined；使用window調(diào)用時，指向的時window對象。

var fn = function () {
    "use strict"
    console.log(this);
    console.log(this === window)
}
fn();
//undfined
//false
window.fn();
//Window對象
//true

在嚴格模式下有一種例外的情況，就是在定時器中的this，此時無論使用window調(diào)用還是不使用window調(diào)用，this都指向window。

var fn = function () {
    "use strict"
    setTimeout(functioin(){
        console.log(this);
        console.log(this === window);
    },1000)
}
fn();
//Window對象
//true

在ES6中箭頭函數(shù)this的指向

在ES6中箭頭函數(shù)this的指向取決于定義時環(huán)境中的this指向一致

var fun = () => {
    console.log(this);
    console.log(this === window);
}
fun();
//Window對象
//true
//定義箭頭函數(shù)時,就是這個過程：()=>{...}所在的環(huán)境是window，所以運行fun()時，箭頭函數(shù)內(nèi)部的this指向window

var obj = {
    name:"Jay",
    age:25,
    fn:()=>{console.log(this)},
    fun:function(){
        console.log(this)
    }
};
//在定義fn時，fn內(nèi)部this的指向就是定義obj對象時所在的環(huán)境，obj所在的環(huán)境是window，所以調(diào)用obj.fn()時，返回的this就是Window對象
obj.fn(); //Window對象
obj.fun();//{name: "Jay", age: 25, fn: ?, fun: ?}

var name = "Kobe";
var obj = {
    name:"Jay",
    age:25,
    fn1:function(){
        return function(){
            console.log(this.name);
        }
    },
    fn2:() =>{
        return () => {
            console.log(this.name);
        }
    }
};
var fnn1 = obj.fn1();
var fnn2 = obj.fn2();
fnn1();//Kobe
fnn2();//Kobe

在DOM事件中的this指向

DOM事件處理函數(shù)中this的指向是觸發(fā)該事件的對象

App

//當點擊App時，console.log(this),打印出來的值時 App

構造函數(shù)中的this指向

構造函數(shù)中的this的指向是通過構造函數(shù)所創(chuàng)建出的對象實例

function Person (){
    this.name = "Jay",
    this.age = 25;
    console.log(this);
}
var p1 = new Person();
//Person {name: "Jay", age: 25}

改變this的指向

可以使用call()、apply()、bind()改變函數(shù)內(nèi)部this的指向（ES6中的箭頭函數(shù)除外）。其中call()和apply()在傳入要綁定的this指向時，立即執(zhí)行。bind()在傳入要綁定的this指向時，并不執(zhí)行，需要再次調(diào)用才會執(zhí)行。

使用call()改變this的指向

 var obj = {
    name:"Jay",
    age:25
};
function fn(){
    console.log(this === obj);
    console.log(this);
}
fn.call(obj);
//true
//{name: "Jay", age: 25}

使用apply()改變this的指向

 var obj = {
    name:"Jay",
    age:25
};
function fn(){
    console.log(this === obj);
    console.log(this);
}
fn.apply(obj);
//true
//{name: "Jay", age: 25}

使用bind()改變this的指向

 var obj = {
    name:"Jay",
    age:25
};
function fn(){
    console.log(this===obj);
    console.log(this);
}
//fn.bind(obj);不會立即執(zhí)行，需要再次調(diào)用才會執(zhí)行。
var fn1 = fn.bind(obj);
fn1();
//true
//{name: "Jay", age: 25}

需要注意的是，當使用call()、apply()、bind()改變函數(shù)內(nèi)部this的指向時,如果傳入的不是一個對象，會調(diào)用相對的構造函數(shù)，進行隱式類型裝換。

function fn(){
    console.log(typeof this === "object");
    console.log(this);
}
fn.apply("I am a string");
//true
//String{"I am a string"}

云服務器 GPU云服務器 javaScript中的this 改變this指向 this的指向 js中的this

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

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

ES5 call,apply,bind方法總結（包括理解this的指向問題）

總結call,apply,bind方法的理解使用和區(qū)別。 call,apply,bind這三個方法在JavaScript中是用來改變函數(shù)調(diào)用的this指向。那么改變函數(shù)this指向有什么用呢？我們先來看一段代碼 var a= { name:harden, fn:function () { console.log(this.name); } } var b =...

nanchen2251 2019-08-23 18:15 評論0 收藏0
javascript this的學習總結

摘要：例如通過，調(diào)用時強制把它的綁定到上。箭頭函數(shù)問題箭頭函數(shù)體內(nèi)的對象就是定義時所在的對象，而不是使用時所在的對象，固定不變。剛入門javascript，關于this的學習，花了自己挺多的時間，做了比較多的功課，看了一篇又一篇的文章，也看了一些書籍，今天就結合看的那些東西總結下自己所學到的東西，方便留著以后回看，進一步的學習，這篇文章會不斷的更新，不斷的更新自己的想法，現(xiàn)在還是一個入門不...

A Loity 2019-08-21 17:32 評論0 收藏0
javascript中this指向問題總結

摘要：文章目的是總結下這個事情，如果沒有考慮周全，遺漏某一條，請過路的留言寫，我在補上。類的實例在函數(shù)中的一般指向和中括號里面的第一個參數(shù)是誰就指向誰。輸出說明指向的是輸出，說明指向的是箭頭函數(shù)中的，就是定義是所在的對象，而不是使用時所在的對象文章目的是總結下這個事情，如果沒有考慮周全，遺漏某一條，請過路的留言寫，我在補上。在自制行函數(shù)中，this --> window let ...

worldligang 2019-08-23 12:38 評論0 收藏0
JavaScript學習總結——this對象

摘要：全局環(huán)境在全局環(huán)境中使用，它會指向全局對象。作為構造函數(shù)調(diào)用中的構造函數(shù)很特殊，如果不使用調(diào)用，則和普通函數(shù)一樣。作為又一項約定俗成的準則，構造函數(shù)以大寫字母開頭，提醒調(diào)用者使用正確的方式調(diào)用。在JavaScript中，this關鍵字是動態(tài)綁定的，或稱為運行期綁定，這極大地增強的我們程序的靈活性，同時也給初學者帶來了很多困惑。本文總結了this的幾個使用場景和常見誤區(qū)。全局環(huán)境在...

wzyplus 2019-08-19 18:06 評論0 收藏0
JavaScript 面向對象開發(fā)知識總結基礎篇

摘要：字面形式允許你在不需要使用操作符和構造函數(shù)顯式創(chuàng)建對象的情況下生成引用值。操作符以一個對象和一個構造函數(shù)作為參數(shù)鑒別數(shù)組有前一小結可以知道鑒別數(shù)組類型可以使用。屬性是函數(shù)獨有的，表明該對象可以被執(zhí)行。這種函數(shù)被稱為匿名函數(shù)。引子： 1.JavaScript 中的變量類型和類型檢測 1.1原始類型 1.2引用類型 1.3內(nèi)建類型的實例化 1.4函數(shù)的字面形式 1.5正則表達式的字...

Kross 2019-08-22 10:35 評論0 收藏0