JavaScript的this

happyfish 發布于2019-08-23 16:19 / 2810人閱讀

摘要：的函數的關鍵字在中的行為與其他語言稍有不同。嚴格模態與非嚴格模態也有一定的區別。在大多數情況下，這個值由函數的調用方式決定。它不能在定義期間通過賦值來確定，而且每次調用函數時它可能是不同的。

Javasctipt 的 this

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

一、在全局環境中的this 在瀏覽器環境中

直接輸出this

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

上述結果說明直接輸出this時，輸出的是它的構造函數，但它其實是一個實例；

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

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

在node環境中

直接輸出this

console.log(this); // {}

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

二、函數中的this 直接在全局環境中調用，而不是作為某個對象的屬性或方法

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

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

// 立即執行函數
!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

作為對象的屬性調用

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}

// 箭頭函數
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 方法調用

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

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的簡單實現
Function.prototype.myBind = function(context){
  self = this;  //保存this，即調用bind方法的目標函數
  return function(){
      return self.apply(context,arguments);
  };
};

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

原理

this指的是函數運行時所在的環境，執行上下文

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

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

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

this的作用

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

箭頭函數原理的思考

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

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； 注意區分上面的立即執行函數

云服務器 GPU云服務器 javascript的this javaScript中的this javascript中this詳解 this的用法

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

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

JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
javascript技術難點（三）之this、new、apply和call詳解

摘要：第四點也要著重講下，記住構造函數被操作，要讓正常作用最好不能在構造函數里 4) this、new、call和apply的相關問題講解this指針的原理是個很復雜的問題，如果我們從javascript里this的實現機制來說明this，很多朋友可能會越來越糊涂，因此本篇打算換一個思路從應用的角度來講解this指針，從這個角度理解this指針更加有現實意義。下面我們看看在ja...

ghnor 2019-08-21 10:27 評論0 收藏0
JavaScript進階之’this‘

摘要：所以相同點是，在全局范圍內，全局變量終究是屬于老大的。只生效一次引入了。只生效一次在箭頭函數中，與封閉詞法環境的保持一致。我通常把這些原始函數叫做構造函數。在里面你可以嵌套函數，也就是你可以在函數里面定義函數。 showImg(https://img-blog.csdnimg.cn/20190522000008399.jpg?x-oss-process=image/watermark,...

shenhualong 2019-08-23 18:37 評論0 收藏0
Javascript 深入淺出This

摘要：中函數的調用有以下幾種方式作為對象方法調用，作為函數調用，作為構造函數調用，和使用或調用。作為構造函數調用中的構造函數也很特殊，構造函數，其實就是通過這個函數生成一個新對象，這時候的就會指向這個新對象如果不使用調用，則和普通函數一樣。 this 是 JavaScript 比較特殊的關鍵字，本文將深入淺出的分析其在不同情況下的含義，可以這樣說，正確掌握了 JavaScript 中的 th...

Y3G 2019-08-22 10:48 評論0 收藏0
學習React之前你需要知道的的JavaScript基礎知識

摘要：和類在開始時遇到類組件，只是需要有關類的基礎。畢竟，中的條件呈現僅再次顯示大多數是而不是特定的任何內容。在我的研討會期間，更多的材料是關于JavaScript而不是React。其中大部分歸結為JavaScript ES6以及功能和語法，但也包括三元運算符，語言中的簡寫版本，此對象，JavaScript內置函數（map，reduce，filter）或更常識性的概念，如：可組合性，可重用...

bitkylin 2019-08-02 11:01 評論0 收藏0