javascript中call和apply的区别和用法

javascript中call和apply的区别和用法

1.call和apply是什么

更改对象的内部指针指向，即改变对象的this指向的内容

function Fn(){
    this.name='小明';
    this.age=18;
    this.slogn=function(){
        console.log('我是'+this.name+'我最棒，今年'+this.age+'没对象');
    }
}
var obj={
    name:'小红',
    age:28
}
var stu1= new Fn();
stu1.slogn.call(obj); //我是小红我最棒，今年28没对象
//此时调用stu1函数中的方法并把this指针移动到obj上，所以slogn方法中的this是指向obj的this，即结果为'我是小红我最棒，今年28没对象'

2.call和apply的区别

apply和call两者在作用上是相同的，第一个参数意义一样，但对第二个参数：
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

如 func.call(func1,var1,var2,var3)；对应的apply写法为：func.apply(func1,[var1,var2,var3])；

function Fn(){
    this.name='小明';
    this.age=18;
    this.slogn=function(){
	console.log('我是'+this.name+'我最棒，今年'+this.age+'没对象');
    }
}
var obj={
    name:'小红',
    age:28
}
var stu1= new Fn();
//stu1.slogn.call(obj); //我是小红我最棒，今年28没对象
stu1.slogn.apply(obj); //我是小红我最棒，今年28没对象
//两个结果是一样的

3.call和apply的用法

在非严格模式下当我们第一个参数传递为null或undefined时，函数体内的this会指向默认的宿主对象，在浏览器中则是window

var Fn2 = function(){
    console.log(this===window);
}
Fn2.apply(null);//true
Fn2.call(undefined);//true

改变this指针指向，把Fn2的指针即（window）,改变为obj2

var name='tianlanlan';
var age=32;

function Fn2(name,age){
    console.log('我是'+this.name+'我最棒，今年'+this.age+'没对象');
}
var obj2={name:'小红',age:28}
Fn2(); //我是tianlanlan我最棒，今年32没对象
Fn2.call(obj2,'xiaoming',12); //我是小红我最棒，今年28没对象

方法引用，就是之前举例的，此时slogn被obj引用

function Fn(){
    this.name='小明';
    this.age=18;
    this.slogn=function(){
	console.log('我是'+this.name+'我最棒，今年'+this.age+'没对象');
    }
}
var obj={
    name:'小红',
    age:28
}
var stu1= new Fn();
stu1.slogn.call(obj); //我是小红我最棒，今年28没对象

实现继承

function Fn5(name){   
  this.name = name+name;   
  this.showName = function(){   
    console.log(this.name);   
  }   
}   
 
function a(name){ 
    this.name = name;
    Fn5.call(this, name);  
}   
 
var stu5 = new a("小茗同学");   
console.log(stu5);
stu5.showName(); //小茗同学小茗同学

假如有一个局部的方法，方法被作为普通函数调用时，方法内部的this指向了window，但我们往往是想让它指向该#p节点

window.id="window";
document.querySelector('#p').onclick = function(){
  console.log(this.id);//p
  var fn7 = function(){
    console.log(this.id);
  }
  fn7();//window
}

解决方法用call和apply

window.id="window";
document.querySelector('#p').onclick = function(){
  console.log(this.id);//p
  var fn7 = function(){
    console.log(this.id);
  }
  fn7.call(this);//p
}