js严格模式下面的this指向

一、全局作用域中的this

es5,6，不管是严格模式函数不是严格模式this都指向window

 

//    'use strict';
    console.log(this);  //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

二、全局作用域中函数中的this

es5，非严格模式this指向window，严格模式this指向undefined；es6箭头函数的this都指向window

 

//es5,非严格模式
//    function demo() {
//        console.log(this);
//    }
//    demo();  //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

//es5,严格模式
//    function demo() {
//        'use strict';
//        console.log(this);
//    }
//    demo();  //undefined

//es6,非严格模式
//    let demo = () => {
//            console.log(this);
//        }
//    demo(); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//es6,严格模式
//    let demo = () => {
//        'use strict';
//        console.log(this);
//    }
//    demo(); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

三、 对象的函数（方法）中的this

es5，不管是严格模式还是非严格模式，this的指向都是调用这个函数的对象；es6的this则是执行该对象所处的执行上下文（执行环境）

 

//在window执行上下文中
//es5，非严格
//    var obj = {
//            fun: function () {
//                console.log(this);
//            }
//        }
//    obj.fun();  //{fun: ƒ}
//es5，严格
//    var obj = {
//            fun : function () {
//                'use strict';
//                console.log(this);
//            }
//        }
//    obj.fun();  //{fun: ƒ}

//es6，非严格
//        var obj = {
//                fun: ()=>{
//                    console.log(this);
//                }
//            }
//        obj.fun();  // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//es6，严格
//    var obj = {
//        fun: ()=>{
//            'use strict';
//            console.log(this);
//        }
//    }
//    obj.fun();  // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

//在一个函数内
//es5,非严格
//    function Constructor() {
//            var obj = {
//                    fun : function () {
//                        console.log(this);
//                    }
//                }
//            obj.fun();  //{fun: ƒ}
//
//    }
//
//    Constructor();
//es5,非严格
//    function Constructor() {
//        var obj = {
//            fun : function () {
//                'use strict';
//                console.log(this);
//            }
//        }
//        obj.fun();  //{fun: ƒ}
//
//    }
//
//    Constructor();

//es6，非严格
//    function Constructor() {
//        var obj = {
//            fun: () => {
//                console.log(this);  //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//            }
//        }
//        obj.fun();
//    }
//    Constructor();
//es6，严格
//    function Constructor() {
//        var obj = {
//            fun: () => {
//                'use strict';
//                console.log(this);  //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//            }
//        }
//        obj.fun();
//    }
//    Constructor();

 

四、构造函数的this

在严格模式下，构造函数中的this指向构造函数创建的对象实例。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

"use strict";   console.log("严格模式"); console.log("构造函数中的this"); function constru(){ this.a = 'constru.a'; this.f2 = function(){ console.log(this.b); return this.a; } } var o2 = new constru(); o2.b = 'o2.b'; console.log(o2.f2());

五、事件处理函数中的this

在严格模式下，在事件处理函数中，this指向触发事件的目标对象。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

"use strict";   function blue_it(e){ if(this === e.target){ this.style.backgroundColor = "#00f"; } } var elements = document.getElementsByTagName('*'); for(var i=0 ; i<elements.length ; i++){ elements[i].onclick = blue_it; }   //这段代码的作用是使被单击的元素背景色变为蓝色

六、内联事件处理函数中的this

在严格模式下，在内联事件处理函数中，有以下两种情况：

?

1 2 3 4 5 6 7 8 9

<button onclick="alert((function(){'use strict'; return this})());"> 内联事件处理1 </button> <!-- 警告窗口中的字符为undefined -->   <button onclick="'use strict'; alert(this.tagName.toLowerCase());"> 内联事件处理2 </button> <!-- 警告窗口中的字符为button -->