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指向构造函数创建的对象实例。

"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指向触发事件的目标对象。

"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

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

<button onclick="alert((function(){'use strict'; return this})());">

内联事件处理1

</button>

<button onclick="'use strict'; alert(this.tagName.toLowerCase());">

内联事件处理2

</button>

js严格模式下面的this指向

猜你喜欢