js中call()方法的使用以及说明

代码实力1

window.color = 'red';

document.color = 'blue',

let obj = {
  color : 'pink'
}

function createColor (color){
  this.color = color;
}
let c = new createColor('white');

function showColor(){
  console.log(this.color)
}
showColor() //默认this就是window  red
showColor.call(window) //  red
showColor.call(cocument) //  blue
showColor.call(obj) //  pink
showColor.call(c) //  white

代码实例2：

var elJson = {
  name:'Web前端',
  callBack:function(){
    console.log(this.name)  
  }
};
var newJson = {
  name:'javaScript is cool'
};

//直接调用
elJson.callBack() //结果是Web前端

//而使用call()方法调用
elJson.callBack.call(newJson ) //结果是javaScript is cool;

解释

call()改变了this的指向，刚开始this的指向是elJson这个对象，而当使用call()this就不在指向这个对象了，而是新的newJson这个对象

代码实例3

利用构造对象方式

  var newJson = {
      name:'javaScript is cool'
    };
    function createJs(name){
        this.name = name;
        this.callBack = function(){
            console.log(this.name);
        }
    }
    var cat = new createJs('Web前端');
    cat.callBack(); //结果是Web前端
    cat.callBack.call(newJson) //结果是javaScript is cool;

两种方法的原理是一样的，只是这一种利用构造对象;
其实在js中var 一个变量都是在顶层对象window中添加了一个属性而已