05-this綁定規(guī)則細(xì)節(jié)和面試題分析

this綁定規(guī)則細(xì)節(jié)和面試題分析

this補(bǔ)充

setTimeout(function () {
  console.log(this);
}, 2000);
// window

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script src="./01-一些函數(shù)的this分析.js"></script>
  </body>
</html>

const boxDiv = document.querySelector(".box");
boxDiv.onclick = function () {
  console.log(this);
};
// <div class="box"></div>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script src="./01-一些函數(shù)的this分析.js"></script>
  </body>
</html>

const boxDiv = document.querySelector(".box");
boxDiv.addEventListener("click", function () {
  console.log(this);
});
boxDiv.addEventListener("click", function () {
  console.log(this);
});
boxDiv.addEventListener("click", function () {
  console.log(this);
});
// <div class="box"></div>
// <div class="box"></div>
// <div class="box"></div>

var names = ["abc", "cba", "nba"];
names.forEach(function (item) {
  console.log(item, this);
});
// abc window
// cba window
// nba window

var names = ["abc", "cba", "nba"];
names.forEach(function (item) {
  console.log(item, this);
}, "abc");
// abc String {"abc"}
// cba String {"abc"}
// nba String {"abc"}

this綁定規(guī)則優(yōu)先級(jí)

優(yōu)先級(jí)

  • new綁定 > 顯示綁定 > 隱式綁定 > 默認(rèn)綁定

優(yōu)先級(jí)-顯式高于隱式綁定

var obj = {
  name: "obj",
  foo: function () {
    console.log(this);
  }
};
obj.foo();
obj.foo.call("abc");
// { name: 'obj', foo: [Function: foo] }
// [String: 'abc']

var obj = {
  name: "obj",
  foo: function () {
    console.log(this);
  }
};
obj.foo();
obj.foo.call("abc");
obj.foo.apply("abc");
// { name: 'obj', foo: [Function: foo] }
// [String: 'abc']
// [String: 'abc']

var obj = {
  name: "obj",
  foo: function () {
    console.log(this);
  }
};
var bar = obj.foo.bind("cba");
bar();
// [String: 'cba']

function foo() {
  console.log(this);
}
var obj = {
  name: "obj",
  foo: foo.bind("aaa")
};
obj.foo();
// [String: 'aaa']

優(yōu)先級(jí)-new高于隱式綁定

var obj = {
  name: "obj",
  foo: function () {
    console.log(this);
  }
};
var f = new obj.foo();
// foo {}

優(yōu)先級(jí)-new高于顯式綁定

function foo() {
  console.log(this);
}
var bar = foo.bind("aaa");
var obj = new bar();
// foo {}

特殊綁定-忽略顯示綁定

function foo() {
  console.log(this);
}
foo.apply("abc");
foo.apply({});
foo.apply(null);
foo.apply(undefined);
// [String: 'abc']
// {}
// window
// window

function foo() {
  console.log(this);
}
foo.apply("abc");
foo.apply({});
foo.apply(null);
foo.apply(undefined);
var bar = foo.bind(null);
bar();
// [String: 'abc']
// {}
// window
// window
// window

特殊綁定-間接函數(shù)引用

var obj1 = {
  name: "obj1",
  foo: function () {
    console.log(this);
  }
};
var obj2 = {
  name: "obj2"
};
obj2.bar = obj1.foo;
obj2.bar();
// { name: 'obj2', bar: [Function: foo] }

var obj1 = {
  name: "obj1",
  foo: function () {
    console.log(this);
  }
};
var obj2 = {
  name: "obj2"
};
(obj2.bar = obj1.foo)();
// window

function foo(el) {
  console.log(el, this.id);
}
var obj = {
  id: "awesome"
};
[1, 2, 3].forEach(foo, obj);
// 1 awesome
// 2 awesome
// 3 awesome

箭頭函數(shù)

  • ES6新增的特性
    • 箭頭函數(shù)不會(huì)綁定this，arguments屬性
    • 箭頭函數(shù)不能作為構(gòu)造函數(shù)來使用(不能和new一起來使用，會(huì)拋出錯(cuò)誤)

箭頭函數(shù)的使用解析

var nums = [10, 20, 45, 78];
nums.forEach(item => {
  console.log(item);
});
// 10
// 20
// 45
// 78

var nums = [10, 20, 45, 78];
var result1 = nums.forEach(item => console.log(item));
var result2 = nums.filter(item => item % 2 === 0);
console.log(result1);
console.log(result2);
var result = nums
  .filter(item => item % 2 === 0)
  .map(item => item * 100)
  .reduce((prev, item) => prev + item);
console.log(result);
// 10
// 20
// 45
// 78
// undefined
// [ 10, 20, 78 ]
// 10800

var bar = () => {
  return { name: "why", age: 18 };
};
console.log(bar());
// { name: 'why', age: 18 }
var bar = () => ({ name: "why", age: 18 });
console.log(bar());
// { name: 'why', age: 18 }

箭頭函數(shù)的this獲取

var name = "why";
var foo = () => {
  console.log(this);
};
foo();
foo.call("abc");
var obj = { foo: foo };
obj.foo();
// window
// window
// window

var obj = {
  data: [],
  getData: function () {
    setTimeout(() => {
      var result = ["abc", "cba", "nba"];
      this.data = result;
    }, 2000);
  }
};
obj.getData();
setTimeout(() => {
  console.log(obj.data);
}, 3000);
// [ 'abc', 'cba', 'nba' ]

面試題

var name = "window";
var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};
function sayName() {
  var sss = person.sayName;
  sss(); 
  person.sayName(); 
  (person.sayName)(); 
  (b = person.sayName)(); 
}
sayName();
// window
// person
// person
// window

var name = "window";
var person1 = {
  name: "person1",
  foo1: function () {
    console.log(this.name);
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name);
    };
  },
  foo4: function () {
    return () => {
      console.log(this.name);
    };
  }
};
var person2 = { name: "person2" };
person1.foo1();
person1.foo1.call(person2);
person1.foo2();
person1.foo2.call(person2);
person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);
person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);
// person1
// person2
// window
// window
// window
// window
// person2
// person1
// person2
// person1

var name = 'window'
function Person (name) {
  this.name = name
  this.foo1 = function () {
    console.log(this.name)
  },
  this.foo2 = () => console.log(this.name),
  this.foo3 = function () {
    return function () {
      console.log(this.name)
    }
  },
  this.foo4 = function () {
    return () => {
      console.log(this.name)
    }
  }
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.foo1()
person1.foo1.call(person2)
person1.foo2()
person1.foo2.call(person2)
person1.foo3()()
person1.foo3.call(person2)()
person1.foo3().call(person2)
person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)
// person1
// person2
// person1
// person1
// window
// window
// person2
// person1
// person2
// person1

var name = 'window'
function Person (name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2: function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.obj.foo1()()
person1.obj.foo1.call(person2)()
person1.obj.foo1().call(person2)
person1.obj.foo2()()
person1.obj.foo2.call(person2)()
person1.obj.foo2().call(person2)
// window
// window
// person2
// obj
// person2
// obj
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容