this不同情况下的指向(javascript)

2018-01-29  本文已影响0人  owlhpy

this的指向基于函数执行环境动态绑定

1、当函数作为对象的方法被调用时,指向对象本身

var a=3;

var obj ={

a:1;

getA:function(){alert(this.a);

}

obj.getA();//输出1

2、当函数作为普通函数方式调用时,this总是指向window对象

var  name ='globalname';

var  myObject ={name:'thisname',getName:function(){return this.name;}};

var getName =myObject.getName;

console.log(getName());//输出globalname,当赋值后直接调用getName相当于普通函数调用

还有这种特殊点的:

html结构

<div id='div1'>我是div1</div>

var  id ='globalid';

document.getElementById('div1').onclick =function(){alert(this.id);var callback = function(){alert(this.id)};callback();};

猜想点击之后的结果是什么?

div1

globalid

因为局部callback函数被作为普通函数调用。

3、作为构造器调用

var myObject =function(){this.name = 'hi';};

var  obj=new myObject();

console.log(obj.name);//hi

使用new  运算符调用函数通常返回一个对象,构造器的this指向返回的这个对象,即例子中myObject。

但是如果构造器中有显式的返回数据或者非对象类型的数据,如  return{name:'name'},则执行生成的对象时输出的是name而不是hi。

4、动态改变传入函数的this指向:.call() .apply()方法

var obj1 = {

name: 'sven',

getName: function(){

return this.name;

}

};

var obj2 = {

name: 'anne'

};

console.log( obj1.getName() ); // 输出: sven

console.log( obj1.getName.call( obj2 ) ); // 输出:anne

上一篇下一篇

猜你喜欢

热点阅读