js中灵活的this

天道酬勤，地道酬精，人道酬善，商道酬诚，业道酬精。

js 中的 this 真是让人又爱又恨，但在 js 的学习中this又是至关重要的，下面分享一些关于我对 js 中this 的理解，能力有限，水平一般，不足之处，多多包涵。
this 学习首先要记住的一点，关于 this 的指向，在函数声明时是看不出来的，只有在函数调用时才能确定 this 指向。

关于 this 使用我总结了以下几点：

1.如果 this 出现在一个普通的函数中，函数中的 this 就表示 window，如果通过 window 打点调用一个函数，这个函数中 this 也表示 window 。

    function f() {console.log(this); // window}f(); //普通函数调用

function f(){var user = "ange997";console.log(this.user); //undefinedconsole.log(this); //Window
}
f(); //普通函数调用

    function k() {console.log(this); // window}window.k();  // window打点调用k(); // 程序员自己调用

2.事件绑定，事件处理程序，事件发生时，浏览器帮我们调用这个函数，此函数中的this表示事件源

        let box = document.getElementById("box");box.onclick = function (){console.log(this); //this表示事件源}

        let box = document.getElementById("box");function f(){console.log(this);	//windowreturn function g(){console.log(this) //事件源}}box.onclick = f();

        let btns = document.getElementsByTagName("button");for (var i = 0; i < btns.length; i++){btns[i].index= i;btns[i].onclick = function (){console.log(this.index)}}

调用函数就会产生一个执行上下文，在绑定事件中，调用函数和函数中的this都被绑定到一个事件中，只用执行这个事件的时候，才会执行这个函数，函数中的，this就是这个事件源，关键在于是谁调用了这个函数，是调用this就是谁。

3.函数方法调用，在一个对象中，如果有方法（函数），如果通过这个对象调用方法，方法中的this表示这个对象。

        var wc = {name : "wangcai", // 属性 age : 100,eat : function (){  // 方法（属性）console.log("eat......");console.log(this.age);}}// 一个方法中的this是谁，就看点前面是谁。wc.eat(); // 调用一个对象上的方法

        function f(){console.log(this);}f();  //普通函数调用let obj = {};obj.g = f;obj.g();	//函数方法调用

4.IIFE立即执行函数，this表示window

    (function () {console.log(this);})();// 在非严格模式下，IIFE中的this表示window

5.严格模式，前四点都在非严格模式下，在严格模式下，调用一个普通函数， this表示undefined，IIFE中的this也表示undefined。

    "use strict"; // 启用JS的严格模式function f() {console.log(this); // undefined}f();(function () {console.log(this); // undefined})();

最后分享几个例题：

    function f() {console.log(this.name);}let box = document.getElementById("box");box.name = "mybox";var name = "mywindow";var obj = {name:"myobj",f:f}f(); // mywindowbox.onclick = f; // 点击得到myboxobj.f(); // myobjbox.onmousedown = function () {f(); // 普通函数调用}

 var num = 10;  // VO ---》 num也变成了65var obj = {num:20, // num:30}obj.fn = (function (num) {// EC  num:20 --》 21  --》 22  --》 23this.num = num*3; // window.num = 60 --》65num++;  //console.log(num)return function (n) {// EC n:5// EC  n:10this.num += n; //num++;console.log(num) // 22   23}})(obj.num)var fn = obj.fn;fn(5);obj.fn(10);console.log(num,obj.num)console.log(window.num)

 (function () {var a = 1;var obj = {a:10,  // 要使用这个a 必须是obj.af:function () {a *= 2;}}obj.f();alert(obj.a+a)})();

  window.a = 1;var obj = {a:10,f:function () {this.a *= 2;console.log(this.a)}}obj.f();

 var name = "window";var Wangcai = {name:"Wangcai",show:function () {console.log(this.name)},f:function () {var fun = this.show;fun(); // 普通函数调用}}Wangcai.f();

 var fullname = "language";var obj = {fullname:"javascript",prop:{getFullName:function () {return  this.fullname;}}}// 谁用了getFullName  看.前面是谁//.前面是obj.prop  说明getFullName中的this是obj.prop//访问一个对象上不存在的属性  得到undefinedconsole.log(obj.prop.getFullName()); // undefined

本次整理略显粗糙，不足之处还请见谅。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！