长沙官网网站建设,用vs做购物网站,慈溪企业网站建设公司,精美的php个人网站源码目录 this 是什么#xff1f; 箭头函数中的 this 为什么要改变 this 指向#xff1f; 改变 this 指向的三种方法 call(无数个参数) apply(两个参数) bind(无数个参数) this 是什么#xff1f; 在对象方法中#xff0c;this 指的是所有者对象#xff08;方法的拥有者…目录 this 是什么 箭头函数中的 this 为什么要改变 this 指向 改变 this 指向的三种方法 call(无数个参数) apply(两个参数) bind(无数个参数) this 是什么 在对象方法中this 指的是所有者对象方法的拥有者。 var person {firstName: Jasmine,lastName: Ge,id: 10108888,fullName: function(){return this.firstName this.lastName;} }; console.log(person.fullName()) // Jasmine Ge 单独的情况下this 指的是全局对象。 // 在浏览器窗口中 this // Window {window: Window, self: Window, document: document, name: , location: Location, …} 在函数中this 指的是全局对象。 (function myFunction(){return this; })() // Window {window: Window, self: Window, document: document, name: , location: Location, …} 在函数中严格模式下this 指的是 undefined。 // js 严格模式不允许默认绑定因此在函数中使用时在严格模式下this 是未定义的undefined use strict; (function myFunction(){return this; })() //undefined 在事件中this 指的是接收事件的元素。 button onclick this.style.backgroundColorskyblue; console.log(this)点击来帮我改变颜色 /button 箭头函数中的 this 箭头函数中的 this 等同于上一层非箭头的函数的 this 值或全局对象window 或 undefined 解释 在箭头函数中this 的指向是由外层函数或者全局作用域来决定如果往外层作用域查找 this 的指向只要没有非箭头函数普通函数的包裹就一直往外层查找直到最外层的全局作用域。如果没有非箭头函数普通函数的包裹即使包裹再多层对象 this 也是指向全局作用域的。 let name obj let obj1 {name: obj1,obj2: {name: obj2,obj3: {name: obj3,obj4: {name: obj4,fn: () {console.log(this) // node环境中输出 {}浏览器中输出 window}}}} }obj1.obj2.obj3.obj4.fn() // Window {0: Window, 1: Window, window: Window, self: Window, document: document, name: obj, location: Location, …} 为什么要改变 this 指向 项目中有如下类似例子find 函数中的 this 指向调用它的 obj 对象而在定时器 setTimeout 中调用 find()this 是指向 window 对象的。但我们需要 find 函数中 的 this 指向 obj 对象因此我们需要修改 this 的指向。 var position 这是 windows 的 position; let obj {position: 这是 obj 的 position,find: function() {console.log(this.position)} }; obj.find(); // 这是 obj 的 positionthis指向obj对象 setTimeout(obj.find, 0); // 这是 windows 的 position由于 setTimeout() 是异步操作this 指向 window 对象 改变 this 指向的三种方法 共同点第一个参数都为改变 this 的指针。若第一参数为 null / undefinedthis 默认指向 window call(无数个参数) 没有参数的时候指向window有一个参数的时候指向当前参数有多个参数this指向第一个参数剩下的参数是参数列表 function fn(a, b, c){console.log(this, a b c); // this指向window } fn(); // Window {0: Window, 1: Window, 2: Window, 3: Window, window: Window, self: Window, document: document, name: , location: Location, …} NaN fn.call(document, 1, 2, 3); // call 之后 this 指向 document //输出 #document 6 1,2,3是实参 结果相加为6 apply(两个参数) 没有参数的时候指向window有一个参数的时候指向当前参数有多个参数this指向第一个参数剩下的参数是数组 function fn(a, b, c){console.log(this, abc); } fn(); // Window {0: Window, 1: Window, 2: Window, 3: Window, window: Window, self: Window, document: document, name: , location: Location, …} NaN fn.apply(document, [1, 2, 3]); // apply之后 this 指向 document // #document 6 bind(无数个参数) 没有参数的时候指向 window有一个参数的时候指向当前参数返回值为一个新的函数使用的时候需要手动调用下返回 的新函数不会自动执行 function fn(a, b, c){console.log(this, abc); } fn() // Window {0: Window, 1: Window, 2: Window, 3: Window, window: Window, self: Window, document: document, name: , location: Location, …} NaN let ff fn.bind(小明, 1, 2, 3); // 手动调用一下 ff() // String {小明} 6