JavaScript的this

happyfish 發(fā)布于2019-08-23 16:19 / 2863人閱讀

摘要：的函數(shù)的關(guān)鍵字在中的行為與其他語言稍有不同。嚴格模態(tài)與非嚴格模態(tài)也有一定的區(qū)別。在大多數(shù)情況下，這個值由函數(shù)的調(diào)用方式?jīng)Q定。它不能在定義期間通過賦值來確定，而且每次調(diào)用函數(shù)時它可能是不同的。

Javasctipt 的 this

函數(shù)的this關(guān)鍵字在JavaScript中的行為與其他語言稍有不同。嚴格模態(tài)與非嚴格模態(tài)也有一定的區(qū)別。在大多數(shù)情況下，這個值由函數(shù)的調(diào)用方式?jīng)Q定。它不能在定義期間通過賦值來確定，而且每次調(diào)用函數(shù)時它可能是不同的。ES5引入了bind()方法來設(shè)置函數(shù)this的值，不管它是如何調(diào)用的，而ES2015引入了箭頭函數(shù)，它不提供自己的this綁定(它保留了所包含的詞法上下文的這個值)。

一、在全局環(huán)境中的this 在瀏覽器環(huán)境中

直接輸出this

console.log(this); // Window
console.log(this === window); // true
console.log(this === Window); // false
window instanceof Window // true

上述結(jié)果說明直接輸出this時，輸出的是它的構(gòu)造函數(shù)，但它其實是一個實例；

"use strict"
console.log(this); // undefined

嚴格模式下，全局的this指向undefined

在node環(huán)境中

直接輸出this

console.log(this); // {}

嚴格和非嚴格模式都是 {}

二、函數(shù)中的this 直接在全局環(huán)境中調(diào)用，而不是作為某個對象的屬性或方法

function fn() {
    return this;
}
let obj = {
    a: 1,
    b: fn
}
fn() // node: global , browser: window
let objFn = obj.b;
objFn(); // node: global , browser: window

// 箭頭函數(shù)
let obj2 = {
    a: 2,
    b: () => this
}
let obj2Fn = obj2.b;
obj2Fn(); // node: global , browser: window

// 立即執(zhí)行函數(shù)
!function(){
    console.log(this === window) // true
}()

let obj = {
    say: function() {
        console.log(this === window) // true
    }()
}
obj.say;

let str = "windows"
let o = {
    str: "o",
    methods: {
        str: "methods",
        fn: function () { console.log(this.str) },
           arrowFn: function() { // IIFE
          let fn = () => { console.log(this.str) } 
          return fn;
           }()
    }
}
o.methods.arrowFn(); // undefined ；此時，this指window；而用let聲明的str變量不會添加到window對象上去,所以為undefined；

在嚴格模式下

function fn() {
    "use strict"
    return this;
}
fn() // undefined

作為對象的屬性調(diào)用

function fn() {
    return this;
}
let obj1 = {
    a: 1,
    b: fn
}
let obj2 = {
    a: 2
}
obj2.b = obj1.b;
obj1.b(); // {a: 1, b: ?n}
obj2.b(); // {a: 2, b: ?n}

// 箭頭函數(shù)
let obj1 = {
    a: 1,
    b: () => this
}
let obj2 = {
    a: 2
}
obj2.b = obj1.b;
obj1.b(); // node: global , browser: window
obj2.b(); // node: global , browser: window

通過call 和 apply 方法調(diào)用

如果函數(shù)在其主體中使用this關(guān)鍵字，則可以使用call()或apply()方法將其值綁定到調(diào)用的特定對象

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

add.call(o, 5, 7); // 16

add.apply(o, [10, 20]); // 34

// 常用的例子
function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call("foo"); // [object String]

通過 bind 方法來綁定this

function fn() {
    return this.a;
}

let k = fn.bind(null);
k(); // undefined
//此時this === window

let g = fn.bind({a: 1});
g(); // 1

let m = fn.bind({a: 2});
m(); // 2

let h = g.bind({a: 3}); // bind只會綁定一次
h(); // 1

// 正常返回值
let obj = {
    a: 1,
    say: (function() {
        let _say = function() {
            console.log(this.a);
        }
        return _say;
    })()
}
obj.say(); // 1

// bind obj
var obj = {
    say: (function() {
        let _say = function() {
            console.log(this === window);
        }
        return _say.bind(obj);
    })()
}
obj.say(); // true



// bind的簡單實現(xiàn)
Function.prototype.myBind = function(context){
  self = this;  //保存this，即調(diào)用bind方法的目標函數(shù)
  return function(){
      return self.apply(context,arguments);
  };
};

let g1 = fn.myBind({a: 1})
g1(); // 1
let h1 = g1.myBind({a: 3})
h1(); // 報錯,

原理

this指的是函數(shù)運行時所在的環(huán)境，執(zhí)行上下文

JavaScript 將對象存儲在內(nèi)存中，會將存儲的地址賦給我們所申明的變量；

var o = {a: 5};
//內(nèi)存中會這樣存儲 o => a => {
//  foo: {
//    [[value]]: 5
//    [[writable]]: true
//    [[enumerable]]: true
//    [[configurable]]: true
//  }
//}

var f = function () {}
var m = {a: f} 
// 當a的值是一個函數(shù)的時候，就會變成以下形式：
//內(nèi)存中會這樣存儲 o => a => {
//  foo: {
//    [[value]]: f的地址
//    [[writable]]: true
//    [[enumerable]]: true
//    [[configurable]]: true
//  }
//}

this的作用

由上面可以看出，由于函數(shù)多帶帶存儲，可以多帶帶運行，運行在不同的上下文中。但要有一個機制來表示它，this就是這個作用，能夠指向當前函數(shù)的運行環(huán)境；

箭頭函數(shù)原理的思考

箭頭函數(shù)又和上文說的內(nèi)容不相符。其實仔細想想，它是個語法糖，等同于給函數(shù)運用了bind方法，綁定函數(shù)的父作用域執(zhí)行環(huán)境

let str = "windows"
let o = {
    str: "o",
    methods: {
        str: "methods",
        fn: function () { console.log(this.str) },
           arrowFn: () => { console.log(this.str) } 
    }
}

let str = "windows"
let o = {
    str: "o",
    methods: {
        str: "methods",
        fn: function () { console.log(this.str) },
           arrowFn: function() {
          let fn = () => { console.log(this.str) } 
          return fn;
           }
    }
}

o.methods.fn(); // methods
o.methods.arrowFn()(); // methods； 注意區(qū)分上面的立即執(zhí)行函數(shù)

GPU云服務(wù)器云服務(wù)器 javascript的this javaScript中的this javascript中this詳解 this的用法

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

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

發(fā)表評論

登陸后可評論

0條評論

happyfish

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow降低版本

閱讀 3910·2023-04-25 19:07
JS中bind、call和apply的作用以及在TS裝飾器中的用法

閱讀 3638·2021-11-22 12:02
誰說“程序員離開電腦就是廢物？我身邊這位大兄弟表示不服！真事

閱讀 3193·2021-10-12 10:11
速云：香港HGC/香港HKT VPS;4核/4GB內(nèi)存/50GB SSD空間/不限流量/500Mbp

閱讀 4150·2021-09-03 10:49
關(guān)于Web移動端rem單位的那些坑

閱讀 2957·2019-08-30 13:21
H5移動端適配IphoneX等機型

閱讀 3079·2019-08-30 11:14
前端每日實戰(zhàn)：49# 視頻演示如何用純 CSS 創(chuàng)作一支誘人的冰棍

閱讀 2149·2019-08-29 15:40
CSS之各種居中

閱讀 2931·2019-08-28 18:29

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript的this

相關(guān)文章

JavaScript深入淺出

javascript技術(shù)難點（三）之this、new、apply和call詳解

JavaScript進階之’this‘

***Javascript* 深入淺出*This***

**學(xué)習(xí)React之前你需要知道的的JavaScript基礎(chǔ)知識**

發(fā)表評論

0條評論

happyfish

男|高級講師

TA的文章

tensorflow降低版本

JS中bind、call和apply的作用以及在TS裝飾器中的用法

誰說“程序員離開電腦就是廢物？我身邊這位大兄弟表示不服！真事

速云：香港HGC/香港HKT VPS;4核/4GB內(nèi)存/50GB SSD空間/不限流量/500Mbp

關(guān)于Web移動端rem單位的那些坑

H5移動端適配IphoneX等機型

前端每日實戰(zhàn)：49# 視頻演示如何用純 CSS 創(chuàng)作一支誘人的冰棍

CSS之各種居中

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript的this

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！