绍兴网站建设方案服务,泰州做网站哪家好,做房产销售可以在哪些网站上找客户,小说主角重生之后做网站理解this
在ES5中#xff0c;this的指向始终坚持一个原理#xff1a;“this永远指向最后调用它的那个对象”#xff0c;切记这句话。下面看几个例子。
例一
var obj {name: zhangsan,say: function() {console.log(this.name);}
}obj.say() // zhangsan 最基本的使用this的指向始终坚持一个原理“this永远指向最后调用它的那个对象”切记这句话。下面看几个例子。
例一
var obj {name: zhangsan,say: function() {console.log(this.name);}
}obj.say() // zhangsan 最基本的使用函数say是obj调用的函数中的this指向obj所以打印的是zhangsan
例二
var name lisi
var obj {name: zhangsan,say: function() {console.log(this.name);}
}var func obj.say
func() // lisi 把say赋给变量func然后调用func前面没有调用对象那么此时的调用对象就是全局对象window因此this指向window所以打印lisi。
例三
var name lisi
var obj {name: zhangsan,say: function() {console.log(this.name);}
}window.obj.say() // zhangsan this永远指向最后调用它的那个对象这里虽然前面加了个window但是最后调用者还是obj因此this指向obj。
可以看出this的指向并不是在创建的时候就可以确定的。在ES5中this永远指向最后调用它的那个对象
例四
var name lisivar obj {name: zhangsan,say: function() {console.log(this.name); // zhangsanfunc()function func() {console.log(this.name); // lisi}},}obj.say() say的调用者是objsay函数内部的this就指向obj因此第一次打印zhangsan。再调用func此时func的调用者是windowfunc函数内部的this就指向window因此第二次打印lisi。
如何改变this指向
改变this指向有以下几种方法
使用ES6的箭头函数把this存一下然后调用_thisthis使用apply、call、bind改变this指向
箭头函数
ES6中的箭头函数可以避免ES5中很多this的坑。箭头函数中的this始终指向函数定义时的this而非执行时。箭头函数中没有this绑定必须通过查找作用域链来决定其值。如果箭头函数被非箭头函数包含则this绑定的是最近一次非箭头函数的this。
例五
var name lisivar obj {name: zhangsan,func1: function() {console.log(this.name);},func2: function() {setTimeout(function() {this.func1()}, 1000)}
}obj.func2() // this.func1 is not a function 如上代码调用func2报错因为最终调用setTimeout的对象是window函数里的this指向window而window中并没有func1所以报错。 这里补充个知识点匿名函数的this永远指向window。this永远指向最后调用它的那个对象。我们来找找最后调用匿名函数的对象是哪个很尴尬匿名函数没有名字所以是没有办法被其他对象调用的所以只能在window下执行。因此匿名函数的this始终指向window。 var name lisivar obj {name: zhangsan,func1: function() {console.log(this.name);},func2: function() {// 使用箭头函数setTimeout(() {this.func1()}, 1000)}
}obj.func2() // zhangsan 使用箭头函数即可解决问题此时this就是func2函数中的this而func2是obj调用的因此this实际指向obj。
_thisthis
简单把this存一下即可
例六
var name lisivar obj {name: zhangsan,func1: function() {console.log(this.name);},func2: function() {// this存一下在匿名函数里使用var _this thissetTimeout(function() {_this.func1()}, 1000)}
}obj.func2() // zhangsan apply、call
apply和call都是用来改变this指向的作用相同用法稍微有点不同。
MDN中apply定义如下 apply() 方法调用一个函数, 其具有一个指定的this值以及作为一个数组或类似数组的对象提供的参数 用法
func.apply(thisArg, ArrayArg) call定义如下 call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。 用法
func.call(thisArg, arg1, arg2, ...) 详细用法见MDN。
例七
var name lisivar obj {name: zhangsan,say: function(arg) {console.log(this.name, arg);}
}var func1 obj.say // lisi 1
func1(1) 此时this指向window打印lisi 1。如果我们现在仍想要this指向obj那么就可通过apply改变this:
var name lisivar obj {name: zhangsan,say: function(arg) {console.log(this.name, arg);}
}var func1 obj.say // zhangsan 2
func1.apply(obj, [2]) 通过apply改变this指向指向obj。然后通过一个数组传入调用时的参数。这就是apply用法的简单实例。call用法与其类似只不过不是通过数组传参而是需要显式传入多个参数。
var name lisivar obj {name: zhangsan,say: function(arg) {console.log(this.name, arg);}
}var func1 obj.say // zhangsan 3
func1.call(obj, 3) 手动实现apply、call
理解了this、this指向、apply、call后我们可以思考一下如何手动实现apply、call。
手动实现apply
Function.prototype._apply function(context) {// context是要绑定的this// this是调用的函数即func1if (typeof this ! function) {throw new Error(只能在函数上调用)return}context context || windowlet result null// 把需要执行的函数赋给context由context调用即可context.fn thisif (arguments[1]) {result context.fn(...arguments[1])} else {result context.fn()}delete context.fnreturn result
}var name lisivar obj {name: zhangsan,say: function(arg) {console.log(this.name, arg);}
}var func1 obj.say // zhangsan 1
func1._apply(obj, [1]) 总结步骤如下
判断调用对象是否为函数即使是定义在函数的原型上的但是可能出现使用 call 等方式调用的情况。* 判断传入上下文对象是否存在如果不存在则设置为 window 。* 将函数作为上下文对象的一个属性。* 判断参数值是否传入* 使用上下文对象来调用这个方法并保存返回结果。* 删除刚才新增的属性* 返回结果手动实现call Function.prototype._call function(context) {// context是要绑定的this// this是调用的函数即func1if (typeof this ! function) {throw new Error(只能在函数上调用)return}context context || windowconst arg Array.from(arguments).splice(1)let result null// 把需要执行的函数赋给context由context调用即可context.fn thisresult context.fn(...arg)delete context.fnreturn result
}var name lisivar obj {name: zhangsan,say: function(arg) {console.log(this.name, arg);}
}var func1 obj.say // zhangsan 2
func1._call(obj, 2) 最后
为大家准备了一个前端资料包。包含54本2.57G的前端相关电子书《前端面试宝典附答案和解析》难点、重点知识视频教程全套。 有需要的小伙伴可以点击下方卡片领取无偿分享
