首页 > 代码库 > javascript里上下文this的理解和call()使用

javascript里上下文this的理解和call()使用

2024-09-19 12:10:45   217人阅读

call 方法

语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 

大概写法：call(Object,arg1,arg2,...);

定义：调用一个对象的一个方法，以另一个对象替换当前对象。 

说明： 
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 

 

文档的定义略微高大上，看完还是云里雾里的，还是通过几个简单的代码来解释一下：

//首先我们看一下这段代码
function Animal(){    
     console.log(this); 
}
Animal();//输出window

//这里相当于Animal.call(undefined);this就是里面的undefined，按理说应该是打印出undefined的，但是浏览器有一条规定：
//在非严格模式下当我们第一个参数传递为null或undefined时，函数体内的this会指向默认的宿主对象，在浏览器中则是window








 如下面例子所示，fn并非属于obj的方法，但是通过call，我们就能将fn内部的this绑定为obj，然后就可以使用this.a访问obj的a属性了。




var a = 10;
function fn() {
　　console.log(this.a);
　　console.log(this);
}
var obj = {
　　a: 20
}
fn();//10,window
fn.call(obj);//20,obj






var Animal = {
  word: ‘words‘,
  say: function(str){
  　　console.log(str +this.word);        
  }        
}
Animal.say(‘speak‘);//speak words
var cat = {
　　word:‘Miao‘
}
Animal.say.call(cat,‘speak‘);//speak Miao




上面例子中，我们定义一个Animal对象，它有word属性和say方法，通过Animal.say()可以获取它的word值。接着定义一个cat，它里面只给定word属性，Animal.say()理论上是指向Animal，但是通过call方法改变执行上下文，把Animal.say的this指向了cat。


 


实现继承




function Animal(words){
  this.words=words,
  this.say=function(){
  　　console.log(this.words);        
  }        
}
function Cat(words){
   Animal.call(this,words);       
}
var cat = new Cat(‘Miao‘);
cat.say();//Miao




 
javascript里上下文this的理解和call()使用






























        

            
                
                  
                
                

                    联系

                    我们