this指向问题(私人版) 川长思鸟来 2022-10-15 11:54 136阅读 0赞 # 开局一张图,装备全靠打 # ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center] **1、作为对象的方法调用** 当函数作为对象的方法被调用时,`this指向该对象` > var obj = \{ > a: 'yuguang', > getName: function()\{ > console.log(this === obj); > console.log(this.a); > \} > \}; > > obj.getName(); // true yuguang **2、作为普通函数调用** 当函数不作为对象的属性被调用,而是以普通函数的方式,this总是指向全局对象(在浏览器中,通常是Window对象) > window.name = 'yuguang'; > > var getName = function()\{ > console.log(this.name); > \}; > > getName(); // yuguang **而在ES5的严格模式下,this被规定为不会指向全局对象,而是`undefined`** **3、构造器调用** 除了一些内置函数,大部分Js中的函数都可以成为构造器,它们与普通函数没什么不同 **构造器**和**普通函数**的**区别在于`被调用的方式`**: 当new运算符调用函数时,总是返回一个对象,this通常也指向这个对象 > var MyClass = function()\{ > this.name = 'yuguang'; > \} > var obj = new MyClass(); > obj.name; // yuguang 但是,如果显式的返回了一个object对象,那么此次运算结果最终会返回这个对象。 > var MyClass = function () \{ > this.name = 1; > return \{ > name: 2 > \} > \} > var myClass = new MyClass(); > console.log('myClass:', myClass); // \{ name: 2\} 只要构造器不显示的返回任何数据,或者返回非对象类型的数据,就不会造成上述问题。 **4、call或apply调用** 跟普通的函数调用相比,用call和apply可以动态的改变函数的this > var obj1 = \{ > name: 1, > getName: function (num = '') \{ > return this.name + num; > \} > \}; > > var obj2 = \{ > name: 2, > \}; > // 可以理解成在 obj2的作用域下调用了 obj1.getName()函数 > console.log(obj1.getName()); // 1 > console.log(obj1.getName.call(obj2, 2)); // 2 + 2 = 4 > console.log(obj1.getName.apply(obj2, \[2\])); // 2 + 2 = 4 **5.箭头函数** 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。 因此,在下面的代码中,传递给setInterval的函数内的this与封闭函数中的this值相同: > var obj1 = \{ > name: 1, > getName: function (num = '') \{ > return this.name + num; > \} > \}; > > var obj2 = \{ > name: 2, > \}; > // 可以理解成在 obj2的作用域下调用了 obj1.getName()函数 > console.log(obj1.getName()); // 1 > console.log(obj1.getName.call(obj2, 2)); // 2 + 2 = 4 > console.log(obj1.getName.apply(obj2, \[2\])); // 2 + 2 = 4 6.Function.prototype.call() `call()` 方法使用一个指定的 `this` 值和单独给出的一个或多个参数来调用一个函数。 **注意:**该方法的语法和作用与 [`apply()`][apply] 方法类似,只有一个区别,就是 `call()` 方法接受的是**一个参数列表**, 而 `apply()` 方法接受的是**一个包含多个参数的数组**。 [查看更多][Link 1] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/399b9b2a557142d1901924c823792353.png [apply]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply [Link 1]: https://blog.csdn.net/jbj6568839z/article/details/106479511?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162189920116780269862788%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162189920116780269862788&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~hot_rank-3-106479511.first_rank_v2_pc_rank_v29&utm_term=this%E6%8C%87%E5%90%91%E6%9C%89%E5%87%A0%E7%A7%8D&spm=1018.2226.3001.4187
还没有评论,来说两句吧...