需求是,放大文章里面的图片,由于是服务端渲染,所以需要操作DOM,先获取到获取元素的标签名img,得到的是一个集合,循环这个集合,给每一个标签加上点击事件。
var imgClick = document.getElementsByTagName("img")
for(var i = 0;i < imgClick.length;i++){
this._img = this.$refs.LargeImg
let _img = this._img
let _this = this
imgClick[i].onclick = function setCurImg () {
_img.imgs = []
_img.imgs.push(this.src)
_img.activeIndex = _img.imgs.length - 1
_img.imgShow = true
_img.load()
}
}
1、当获取标签时,this的指向是全局对象
2、当循环的时候,this仍然是指向全局对象
3、而当添加点击事件函数之后,this指向发生了变化
4、此时this指向的是调用这个函数的那个标签
this的指向问题
随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。
1.this指向的形式4种
a.如果是一般函数,this指向全局对象window;
b.在严格模式下"use strict",为undefined.
c.对象的方法里调用,this指向调用该方法的对象.
d.构造函数里的this,指向创建出来的实例.
定义一个_this变量来存储this值,使全局对象里面的this 指向person 的this
this最近的函数是全局对象setTimeout
var person = {
name: "shafee",
age: 20,
say: function () { // 对象的属性是函数,就叫函数的方法
console.log(this.name); // object shafee
}
};
person.say();
var name = "Tom";
var body = document.getElementById("body");
body.onclick = function () {
console.log(this.name); // window Tom
}
var fn = person.say;
fn(); // window Tom
- 改变this指向的方式
以下属于函数的方法
改变this的指向并且执行调用函数
.call(), call(thisScope, arg1, arg2, arg3…)
.apply(), apply(thisScope, [arg1, arg2, arg3…]);两个参数
而bind 改变this的指向,返回的是函数
.bind() bind(thisScope, arg1, arg2, arg3…)
call,可以传入多个参数,改变this指向后立刻调用函数
apply,可以传入数组
bind改变this指向后,返回的是函数