JavaScript的this

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

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

Javasctipt 的 this

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

一、在全局環(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é)果說(shuō)明直接輸出this時(shí)，輸出的是它的構(gòu)造函數(shù)，但它其實(shí)是一個(gè)實(shí)例；

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

嚴(yán)格模式下，全局的this指向undefined

在node環(huán)境中

直接輸出this

console.log(this); // {}

嚴(yán)格和非嚴(yán)格模式都是 {}

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

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 ；此時(shí)，this指window；而用let聲明的str變量不會(huì)添加到window對(duì)象上去,所以為undefined；

在嚴(yán)格模式下

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

作為對(duì)象的屬性調(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

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

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

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]

通過(guò) bind 方法來(lái)綁定this

function fn() {
    return this.a;
}

let k = fn.bind(null);
k(); // undefined
//此時(shí)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只會(huì)綁定一次
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的簡(jiǎn)單實(shí)現(xiàn)
Function.prototype.myBind = function(context){
  self = this;  //保存this，即調(diào)用bind方法的目標(biāo)函數(shù)
  return function(){
      return self.apply(context,arguments);
  };
};

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

原理

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

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

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

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

this的作用

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

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

箭頭函數(shù)又和上文說(shuō)的內(nèi)容不相符。其實(shí)仔細(xì)想想，它是個(gè)語(yǔ)法糖，等同于給函數(shù)運(yùn)用了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ù)

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

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

happyfish

男|高級(jí)講師

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

TA的文章

tensorflow降低版本

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

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

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

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

閱讀 2903·2019-08-30 13:21
H5移動(dòng)端適配IphoneX等機(jī)型

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

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

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

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

資訊專(zhuān)欄INFORMATION COLUMN

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

JavaScript的this

相關(guān)文章

JavaScript深入淺出

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

JavaScript進(jìn)階之’this‘

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

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

發(fā)表評(píng)論

0條評(píng)論

happyfish

男|高級(jí)講師

TA的文章

tensorflow降低版本

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

誰(shuí)說(shuō)“程序員離開(kāi)電腦就是廢物？我身邊這位大兄弟表示不服！真事

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

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

H5移動(dòng)端適配IphoneX等機(jī)型

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

CSS之各種居中

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

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

JavaScript的this

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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