02 this规则
this机制
javaScript这个迷人又令人困惑的混血儿，借鉴了多种编程语言的机制，这其中就包括就包括this机制。
this是什么？
在javascript里面，this是一个特殊的对象，它不像其他编程语言那样，是存储在实例中的值，直接指向此实例。而是作为一个单独的指针，自动定义于每一个函数域中，指向不同的位置，这也是为什么我们会将它搞混的原因。
js中的this代表的是当前行为的主体，js中上下文代表的是当前行为执行的环境。
为什么使用this
this为代码复用提供了可能，让代码变得更加简洁和复用。
this的5条规则
this到底绑定或者引用那个对象环境决定于函数被调用的地方。而函数的调用有着不同的方式，在不同的方式中调用决定this引用的是那个对象。
->我们一般只研究函数执行的时候里面的this
->this是谁和当前的函数在哪执行和在哪定义没有半毛钱的关系
1)看函数执行的时候,函数名之前是否有".",有的话"."前面是谁this就是谁,没有的话this就是window
oDiv.onclick=function(){
//匿名函数中的this->oDiv
fn();//fn函数中的this->window
};
[].slice(0);//->slice中的this是[]
[].__proto__.slice(0);//->slice中的this是Array.prototype
-->我们自己在数组原型中编写的方法,一般情况下我们函数中的this就是当前我们要操作的这个元素
Array.prototype.distinct=function(){
//this->我们当前要操作的这个数组
};
[1,2,2,3,1,2,3,2,1].distinct();
2)自执行函数中的this永远是window
(function(){ //this->window })();
~function(){ //this->window }();
window.setTimeout(function(){
//this->window
},10);
ary.sort(function(a,b){
//第一个匿名函数(参数)在执行的时候里面的 this->window
});
ary.forEach(function(){
//第一个匿名函数(参数)在执行的时候里面的 this->window
//但是如果context传递了值(第二个参数传递值了)那么这个方法中的this就是context
},context);
str.replace(reg,function(){
//this->window
});
3)给元素的某一个事件绑定方法,当事件触发的时候,方法中的this是当前元素本身
//[DOM零级事件绑定]
oDiv.onclick=function(){
//this->oDiv
};
//[DOM二级事件绑定]
oDiv.addEventListener("click",function(){
//this->oDiv
},false);
//在IE6~8下使用attachEvent
oDiv.attachEvent("click",function(){
//this->window
});
4)在构造函数模式中,我们的this.xxx=xxx中的this是当前的类的一个实例
function Fn(){
this.x=100;//this->f x是给当前实例f增加的私有的属性
}
Fn.prototype.getX=function(){
console.log(this.x);
};
var f=new Fn;
f.getX();//getX中的this->f
f.__proto__.getX();//getX中的this->Fn.prototype
5)call和apply强制改变this的指向->以上所有的this情况在遇到call/apply的时候都不好使,都已强制改变的为主
obj.fn.call(1);//this->1
一般情况下,我们执行call方法第一个传递的参数值是谁,那么fn中的this就是谁
[在非严格模式下]
第一个参数没有传递值、传递的是null、传递的是undefined fn中的this都是window
[严格模式下]
第一个参数传递的是谁this就是谁,传递null/undefined,fn中的this都是对应的null/undefined,不传递值默认也是undefined
小结
-
默认绑定全局变量
-
隐式调用
function fn(){
a=1;
console.log(this.a)
}
var obj = {
a=2,
fn:fn
};
obj.fn(); //2
//只看倒数第一个小数点·前的对象；
//即最后一个调用该函数的对象就是传到该函数的上下文；
function fn(){
console.log(this.a)
}
var obj2 = {
a:42,
fn:fn
}
var obj1 = {
a:2,
obj2:obj2
}
obj1.obj2.fn() //42;
失去隐式绑定
function fn(){
cnsole.log(this.a)
}
obj1 = {
a:2,
fn:fn
};
var bar =obj1.fn;
var a = "全局变量"
bar() //全局变量
- 显式绑定
即通过call/apply/bind给函数传入this
- new实例绑定
你以为 你以为的 就是你以为的
