企业官网建设流程全解析

网站二级菜单是什么原因,北京西站,高端品牌网站建设专人一对一服务,百度指数热度榜一、this的概念this是执行上下文中的一个属性#xff0c;它指向最后一个调用这个方法的对象。#xff08;这句话听着很拗口#xff09;简单理解就是#xff1a;谁调用了函数#xff08;或方法#xff09;#xff0c;this就指向谁。#xff08;就这样记就好#xff09;…一、this的概念this是执行上下文中的一个属性它指向最后一个调用这个方法的对象。这句话听着很拗口简单理解就是谁调用了函数或方法this就指向谁。就这样记就好至于“指向最后一个调用这个方法的对象”可以通过举一个例子解释const a { name: 11, b: { name: 22, c: { name: 33, fn: function () { console.log(this.name) }, } } } a.b.c.fn()可以看到。这里a、b、c 看着好像都调用了 fn 函数但是我们都知道最后调用者是 c所以这里的“指向最后一个调用这个方法的对象”也就能通过这个例子感受到。二、this的指向可以通过四种调用模式来判断1. 函数调用模式当一个函数不是一个对象的属性时直接作为函数来调用时this 指向全局对象。补充 - 函数定义不依附于任何对象、可以被直接调用的代码块。// 1. 函数调用模式 function fn() { console.log(this) // this 指向全局 (this window) } fn() // 这里本质上是window.fn() 这样调用函数的2. 方法调用模式如果一个函数作为一个对象的方法来调用时this指向这个对象。补充 - 方法定义作为对象属性存在并通过“对象.属性()”形式调用的函数。// 2. 方法调用模式 const obj { fn: function () { console.log(this) } } obj.fn() // this 指向调用者 - obj3. 构造器调用模式如果一个函数用 new 调用时函数执行前会新创建一个对象此时this会指向这个新对象。// 3. 构造器调用模式 function Person(name, age) { this.name name this.age age } // 不使用 new 的情况 // const p1 Person(lxy, 18) // 如果不使用 new 的话这里相当于函数调用模式window.Person()那么此时 this 指向全局 // console.log(p1) // undefined // console.log(name) // lxy - window.name // console.log(age) // 18 - window.age // 使用 new 的情况 const p2 new Person(778, 18) // 如果使用 new 的话这里会创建一个新的对象出来此时 this 会指向这个新对象也就是下面的 p2 console.log(p2) // {name: 778, age: 18} console.log(p2.name) // 778 console.log(p2.age) // 184. apply、call、bind调用模式这三个函数都可以指定调用函数的 this 指向。// 4. apply, call, bind 调用模式 function fn(x, y) { console.log(this) return x y } const obj { name: lxy } const res1 fn(1, 2) // 此时 this 为 window全局 console.log(res1) // 3 const res2 fn.apply(obj, [2, 3]) // 此时 this 为 obj console.log(res2) // 5 const res3 fn.call(obj, 3, 4) // 此时 this 为 obj console.log(res3) // 7 const newFn fn.bind(obj, 4, 5) // 调用 bind 得到一个新函数该函数的 this 指向 obj const res4 newFn() // 调用新函数 console.log(res4) // 9其中apply方法接收两个参数第一个是新 this 指向的对象第二个是传递的参数这里是数组等可迭代的对象。apply 方法会直接调用函数。call方法接收的参数第一个是新 this 指向的对象第二个是传递的参数这里不是数组这里的参数必须逐个列举出来。call 方法会直接调用函数。bind方法接收的参数第一个是新 this 指向的对象第二个参数是传递的参数这里同样是要逐个列举出来。bind 方法会返回一个新的对象该新对象的 this 指向参数一的对象不会直接调用该函数。注意这个函数的 this 指向只能通过 new 来改变其他的改变方式都不会生效。看下面的代码function fn(name) { console.log(我的名字是${name}) console.log(我的年龄是${this.age}) } fn(lxy) // name - lxy ; age - undefined console.log(----------------------------------------) const obj { age: 18 } const newFn fn.bind(obj, lxy) newFn() // name - lxy ; age - 18 此时 this 指向 obj所以 age 有值 console.log(----------------------------------------) // 使用 apply 去改变 newFn 的 this 指向 newFn.apply({ age: 20 }, [zzz]) // 这里仍然 name - lxy ; age - 18 并没有发生改变说明 this 指向并没有发生改变 // 注意这里会发现为什么传入了 zzz 参数但是 name 并没有发生改变这是因为 // 在第一次使用 bind 的时候lxy 这个参数已经固定了它会作为函数的第一个参数。 // 后续调用时传入的参数会排在 bind 固定参数的后面。 // 由于函数只定义了一个参数 name它只会取参数列表中的第一个也就是 bind 固定的 lxy。 console.log(----------------------------------------) // 使用 call 去改变 newFn 的 this 指向 newFn.call({ age: 30 }, [ccc]) // 这里与前者效果一样this 未发生改变 console.log(----------------------------------------) // 使用 new 的方式去改变 newFn 的 this 指向 const a new newFn(eee) // 可以发现 age - undefined 说明 this 发生了改变this 现在指向了 new 出来的新对象上去了新对象上没有 age 所以显示为 undefinedname 仍然没有变还是跟上面的一个道理三、四种调用模式的优先级这四种调用模式中构造器调用模式优先级最高然后是 apply、call、bind 调用模式然后是 方法调用模式最后是 函数调用模式。构造器调用模式 apply、call、bind调用模式 方法调用模式 函数调用模式