面向对象查看this指向的规律。

规律1 :只要以小括号的形式直接调用的方式,那this一定指向window。

规律2 : 只要以对象点的方式调用的话,那this一定指向这个对象 。

         规律1和规律2的实例 :

             var obj = {
a : 10,
hob : function(){
console.log(this.a);
}
}
var a = 20;
obj.hob();  // 以对象点的方式调用,参看规律2   > 10
var fn = obj.hob;

fn();       // 以小括号的方式直接调用,参看规律1   > 20


规律3 :函数作为事件的处理函数时,一定指向这个事件的对象。

          规律3实例:

                function fun(){
this.style.backgroundColor = "yellow"
}
var ul = document.getElementById("box")

ul.onclick = fun


规律4 : 当函数被定时器调用时,this一定指向window。

            规律4实例 :

                    function fun1(){
var b = 10;
console.log(this.b)
}
var b = 20;

setInterval(fun1 , 1000)   // 每一秒输出一遍  > 20  

            


                // 规律3规律4结合实例 , 点击元素后2s背景色变成黄色

ul.onclick = function(){
//  this   -> 执行的是ul这个元素对象 
var self = this;  // 将元素的this进行备份,用于在this中调用
setTimeout(function(){
//  this  - >  window 因为在定时器里面this指向的是window,我们想让元素的背景色进行改变,所以需要用备份ul的this
self.style.backgroundColor = "yellow";
},2000)
}

规律5 :数组中存放的函数,被数组索引调用,this就是这个数组。

                     规律5实例 :

                        function fun2(a , b , c){
console.log(this === arr); // ->true  ,this指向的就是这个数组
console.log(this.length);  // -> arr.length ->3
}
var length = 10;
var arr = [fun2 , "测试" , "规律5"];
arr[0]();// 此时这个函数是从数组中枚举出来调用的,并不是直接用小括号的方式调用的,所以this指向的是这个数组,不要和规律1弄混。




        混合实例  :

        function fun3(){
console.log(this.a);
}
var obj3 = {
a : 1,
b : 2,
c : [{
a : 3,
b : 4,
c : fun3
}]
}
var a = 10;
obj3.c[0].c();  // ->3
//对           象.方法   ->适用规律2 ,this指向的就是数组c第零位的对象。


----------------------------------------------------------------------------------------------------------------------------------

                        function arg(m , n , p , q , r){
console.log(this.length);
}
function f(a , b){
arguments[0](9,10,11,12,13);
}
f(arg,1,2,3)  // ->4  

/*解析题目
 
* 在函数内部,我们想得到函数自身,用this是不可能的,我们只能用arguments.callee如下
* function fun (a,b,c,d,e,f){
* console.log(arguments.callee ===fun)   //->true
* console.log(arguments.callee.length)   //函数的长度取决于形参列表 - >6
* console.log(arguments.length)    //->3 取决于实参的个数
* }
* console.log(fun.length)  - > 6  函数的长度
* fun(88,66,44)
* 由此我们看上面的调用方式,最后是arguments[0](9,10,11,12,13);这时候的this指向的就是arguments,参考规律5,所以arguments.length ->4
* */   

猜你喜欢

转载自blog.csdn.net/baidu_38027860/article/details/80161875