js里this的幾種用法

melody_lql 發布于2019-08-20 15:37 / 2436人閱讀

摘要：的幾種用法關于是什么理論上是執行上下文的一個屬性，的值在進入到執行上下文的時候就已經確定了，且不會再改變。默認綁定這種情況下，不屬于任何一個函數方法內，即在全局作用域下，這種情況下稱為默認綁定。最后的總結用偽代碼的形式來表示例外例外本文參考

this的幾種用法 關于this

this是什么？

理論上this是執行上下文的一個屬性，this的值在進入到執行上下文的時候就已經確定了，且不會再改變。這一點很重要。

this的作用？

this 的機制提供了一個優雅的方式，隱式地傳遞一個對象，這可以讓函數設計的更加簡潔，并且復用性更好。

總覽

new綁定，this指向由new創建的對象

顯示綁定，this指向apply或者call函數的第一個參數

隱式綁定，this指向函數的調用者。

默認綁定，嚴格模式下指向undefinded，非嚴格模式this指向全局對象。

箭頭函數綁定，this指向箭頭函數外邊包裹的普通函數

new綁定

當用new創建一個新的對象的時候，this指向了由new關鍵字聲明創建的對象。

class Person(name){
    constructor(name){
        this.name = name;
    }
    showThis(){
        return this;
    }
}
var p1 = new Person("zhang");
var p2 = new Person("zhao");
console.log(p1.showThis() === p1);    //true
console.log(p2.showThis() === p2);    //true
console.log(p1.showThis() === Persion)    //false

可以看到，這種情況下this的值指向了由new創建的對象的引用。this會被綁定到這個對象上去。

顯式綁定

所謂的顯式綁定，指的是通過apply或者call方法的第一個參數。

call和apply的不同，兩個方法的第一個參數都是this賦給的對象。不同在于，之后的參數被當作call方法的形參依次傳進去，而apply則是接受一個數組。

看代碼：

function foo(){
    console.log(this === obj);     //true
    console.log(this.a === 2);     //true
}

var obj = {
    a:2
}

foo.call(obj);

隱式綁定

隱式綁定用的次數比較多。一個最重要的特點就是，this的指定順序和在哪里定義沒有關系，而是取決于調用者。

嚴格意義來說，this是上下文里的一個屬性（存放各種變量的變量對象同樣也是上下文里的屬性），this的值總是指向當前上下文的父級上下文，其實也就是當前上下文的調用者。

看代碼：

//第一個簡單的例子
var obj = {
    a : 1,
    foo : function(){
        console.log(this === obj);     //trun
        console.log(this.a === 1);     //true
    },
    bar : bar
}

//假如把一個屬性定義在對象外邊
function bar(){
    console.log(this === obj);      //true
}

obj.foo();
obj.bar();     //都是true

再來一個例子

function bar(){
    console.log(this === obj1);
    console.log(this === obj2);
}
function foo(){
    console.log(this === obj1);
    console.log(this === obj2);
}

var obj1 = {
    bar: bar,
    foo: foo
}

var obj2 = {
    bar: obj1.bar,
    foo: obj1.foo,
}

obj1.foo();     //true  false
obj2.foo();     //false  true
obj1.bar();     //true  false
obj2.foo();     //false  true

很簡單，foo和bar兩個方法分別由obj1和obj2調用，哪怕obj2中的foo和bar是obj1的也沒關系，與在哪里定義沒有關系，純粹看是看誰調用的，obj2.foo()就是obj2調用的foo方法，所以，這個時候this指向obj2。

多說一句，如果既有顯示綁定又有隱式綁定，當然是以顯示綁定為準。

默認綁定

這種情況下，this不屬于任何一個函數方法內，即在全局作用域下，這種情況下稱為默認綁定。

非嚴格模式下，這個時候this值為window全局對象。

function foo(){
    console.log(this === window);
}

foo();

嚴格模式下，this的值是undefined

"use strict";

function foo() {
  console.log( this === undefined );
}

foo();               // true
foo.call(undefined); // true
foo.call(null);      // false

箭頭函數

箭頭函數其實是一個語法躺，箭頭函數的里的this指向包裹箭頭函數的那個函數的this值。很好理解。

// ES6
function foo() {
  setTimeout(() => {
    console.log(this === obj); // true
  }, 100);
}

const obj = {
  a : 1
}

foo.call(obj);

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log(_this === obj); // true
  }, 100);
}

var obj = {
  a : 1
}

foo.call(obj);

最后的總結

用偽代碼的形式來表示

if (`newObj = new Object()`) {
  this = newObj
} else if (`bind/call/apply(thisArgument,...)`) {
  if (`use strict`) {
    this = thisArgument
  } else {
    if (thisArgument == null || thisArgument == undefined) {
      this = window || global
    } else {
      this = ToObject(thisArgument)
    }
  }
} else if (`Function Call`) {
  if (`obj.foo()`) {
    // base value . Reference = base value + reference name + strict reference
    // 例外： super.render(obj).  this = childObj ?
    this = obj 
  } else if (`foo()`) {
    // 例外： with statement. this = with object?   
    this = `use strict` ? undefined : window || global
  }
}

本文參考

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

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

判斷是否是數組的幾種方法— (js基礎復習第1期)

摘要：如果網頁中包含多個框架，那實際上就存在兩個以上不同的全局執行環境，從而存在兩個以上不同版本的構造函數。如果你從一個框架向另一個框架傳入一個數組，那么傳入的數組與在第二個框架中原生創建的數組分別具有各自不同的構造函數。 1. 首先，typeof肯定是不行的對于一些基本類型，typeof是可以判斷出數據類型，但是判斷一些引用類型時候，不能具體到具體哪一種類型再來復習一下typeof的...

supernavy 2019-08-23 12:59 評論0 收藏0
返回頂部的幾種實現

摘要：返回頂部這里初始狀態的返回頂部為不可見，通過判斷頁面滾動高度切換顯示隱藏，的樣式可以自己設計。 showImg(https://segmentfault.com/img/bVGDef?w=1390&h=540); 返回頂部的按鈕大家并不陌生，針對長滾動條的信息流頁面添加返回頂部的按鈕可以給用戶良好的體驗，而返回頂部的實現也是多種多樣，本文分享幾個案例并給出評價作為引子講一個常用的案例...

SillyMonkey 2019-08-02 15:56 評論0 收藏0
返回頂部的幾種實現

摘要：返回頂部這里初始狀態的返回頂部為不可見，通過判斷頁面滾動高度切換顯示隱藏，的樣式可以自己設計。 showImg(https://segmentfault.com/img/bVGDef?w=1390&h=540); 返回頂部的按鈕大家并不陌生，針對長滾動條的信息流頁面添加返回頂部的按鈕可以給用戶良好的體驗，而返回頂部的實現也是多種多樣，本文分享幾個案例并給出評價作為引子講一個常用的案例...

silvertheo 2019-08-22 10:48 評論0 收藏0
前端面經整理之JS和CSS

摘要：作為對象原型鏈的終點。調用函數時，應該提供的參數沒有提供，該參數等于。它可以用于引用該函數的函數體內當前正在執行的函數。一 JS 二 CSS 一 JS ==和===的區別 ===叫做嚴格運算符 ==叫做相等運算符嚴格運算符比較時不僅僅比較數值還要比較數據類型是否一樣相等運算符在比較相同類型的數據時，與嚴格相等運算符完全一樣。在比較不同類型的數據時，相等運算符會先將數據進行類型轉換，...

stonezhu 2019-08-21 17:34 評論0 收藏0