1.給元素的某個事件行為系結方法，事件觸發，方法執行，此時方法中的this一般都是當前元素本身：
<div id="div"></div>
div.onclick = function() { console.log(this); //=><div id="div"></div> };
div.addEventListener('click', function () {
console.log(this); //=><div id="div"></div>
}, false);
這里邊有個特殊情況就是DOM2級系結事件
div.attachEvent('onclick',function anonymous(){
console.log(this); //=>window
});
2.普通函式執行，它里邊的this是誰，取決于方法執行前面是否有“.”，有的話，“.”前面是誰this就是誰，沒有的話并且是在非嚴格模式下this就是window，嚴格模式下是undefined：
function fn() { console.log(this); } let obj = { name: 'OBJ', fn: fn }; fn(); //window obj.fn(); //{name: 'OBJ',fn: fn}
3.建構式執行(也即是new執行)，函式中的this是當前類的實體：
function F() { console.log(this); } let f = new F; // F {}
4.箭頭函式中沒有this，所用到的this都是其背景關系中的this(或者說是上級背景關系)：
let obj = { fn: () => { console.log(this); } } obj.fn(); //window
let obj = { fn: function () { setTimeout(_ => { console.log(this); }, 1000); } }; obj.fn(); //obj
5.基于call/apply/bind可以改變函式中this的指向：
let obj = { fn: function(){ console.log(this); } } obj.fn(); //obj obj.fn.call(12); //12
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/147279.html
標籤：JavaScript
上一篇：解決React路由URL中hash(#)部分的顯示 、browserHistory打包后瀏覽器重繪頁面出現404的問題
下一篇：07.JS物件-2