我们在刚开始学习JavaScript的时候,很容易被JavaScript中的this及其相关的方法,例如:bind,apply,call方法迷惑。JavaScript里的函数是一个高阶函数,编程语言里的高阶函数是可以作为对象传递的,同时javascript里的函数还有可以作为构造函数,这个构造函数可以创建实例化对象,结果导致方法执行时候this指针的指向会不断发生变化,很难控制。其实我们只要根据包含this指针的方法的用途加以区分,就能了解this指针所指向的对象。
This指针指向全局环境,即Window对象。在全局环境中直接调用函数时,this对象会指向Window对象,例如:
var name='vicky'
function sayName(name){
console.log(this.name);
}
sayName(); //this指向window对象,而因为在全局环境中定义了var name='vicky';所以this.name输出:vicky
window.sayName(); //sayName()效果等同于window.sayName()
this指针指向调用函数的对象本身
var name='Bob';
function sayName(){
console.log(this.name);
}
var object={'name':'vicky'};
object.sayName=sayName; //sayName没有写成sayName(),表示不是执行函数,而是将sayName的指针赋值给object.sayName
object.sayName(); //由于对象函数调用方法,this指向对象本身,所以输出:'vicky'
sayName(); //由于全局环境调用sayName()等同于window.sayName();输出:'Bob'
上面的例子已经很好的说明了在全局环境直接调函数调用和对象函数调用时this指针指向的区别。
this指针指向新创建的对象
function object(name){
this.name=name;
console.log(this); //由于this指向新创建的对象本身,输出:Object { name: "vikcy" }
console.log(this.name); //输出:"vicky"
}
var myObject=new Object('vicky'); //由于this指向新创建的对象本身
例如call、apply方法,还有个特殊的bind方法
call(this指针要指向的对象,参数1,参数2,.....)
call方法可以动态的设置函数体内的this指向,例如:
function Cat(age,name){
this.name='cat';
console.log(this);
console.log('cat: age:'+age+",name:"+name);
}
var cat=new Cat(4,'Bob'); //输出:Cat {name: "cat"}和cat: age:4,name:Bob
Cat.call(this,3,'Tom'); //由于调用了call方法,输出:this指向了Window和cat: age:3,name:Tom
先看var cat=new Cat(4,'Bob');这行代码,这里的this指向的是新建的Cat对象,输出的“cat: age:4,name:Bob”也是在对象初始化时候传入的。
Cat.call(this,3,'Tom');这行代码,这里的this指向的是Window对象,因为:我们在全局环境调用了Cat.call(this,3,'Tom');方法,这里call函数第一个参数(this指针要指向的对象)我们传入了this,而全局环境下的this指向的正好就是window对象,而第三和第四个参数,我们分别定义了age=>3,name=>'Tom'
javascript里call和apply操作符可以随意改变this指向,这看起来很灵活,但是某种程度上这种不合常理的做法破坏了我们理解this指针的本意,同时也让写代码时候很难理解this的真正指向。
想要了解this指向时,我们应该先弄清楚函数调用的方式,最后问自己这个this指向的对象是从何而来。只有弄清楚其本质,我们才能更好地在动力节点在线的JavaScript视频教程中学习this指针。
代码小兵49806-11 15:28
代码小兵49806-11 15:51
代码小兵49806-11 16:22
代码小兵51603-29 17:28
暴风城-小飞04-06 20:49