js中更改this指向 以及回顾bindcall和apply

Posted 2021-11-30 wangwenxin123

1.更改this指向

　　方法1：对this进行保存
            　　　var _this = this;

　　　　　　　例： var _this = this;
     　　　　　　　　document.onclick = function(){
       　　　　　　　　　　 console.log(_this)
   　　　　　　　　　　  }
  　　　　　　　　　  console.log(_this);

　　方法2：bind   更改this指向。   返回的是一个函数体
           注意：  fn.bind(document)();   更改指向必须加（）调用。

　　　例1：function fn(){
      　　　　　　  console.log(this);
   　　　　　　　　 }
   　　　　 fn.bind(document)();

　　　例2：var obj = {
                show : function(){
                    console.log(this);
                }.bind(document)
            }

　　方法3:call    更改this指向         fn.call(document);

　　　　　　call(this指向,参数1,参数2,参数3,参数4)

　　　　　　function fn1(a,b){
        　　　　return a + b;
  　　　　　　  }
    　　　　function fn2(a,b){
       　　　　　　 return a * b;
   　　　　　　 }
    　　　　var res = fn2.apply(fn1,10,20);
    　　　　　console.log(res);

　　方法4：apply  更改this指向       fn.apply(document);

　　　　　　 apply(this指向,[值1,值2....])

　　例1：
     　　　　function fn(){
       　　　　console.log(this);
   　　　　　　　　 }
  　　　　 fn.apply(document);

　　例2：function fn1(a,b){
        　　　　return a + b;
  　　　　　　  }
    　　　　function fn2(a,b){
       　　　　　　 return a * b;
   　　　　　　 }
    　　　　var res = fn2.apply(fn1,[10,20]);
    　　　　　console.log(res);

总结：

更改this指向:
            bind     call    apply区别

        bind :     返回的是一个函数体,    用必须加()调用;

        call 和 apply的区别:
            所接收的参数不同
            call(this指向,参数1,参数2,参数3,参数4)
            apply(this指向,[值1,值2....])

 

2.call和apply回顾

　　例1：function yasuo(name){

　　　　this.name=name;

　　　　this.skill=function(name){

　　　　　　console.log(name+‘正在使用钢铁斩‘)；

　　　　　　}

　　　　}

　　var have =new yasuo(‘亚索‘)；

　　　　hove.skill();                            //亚索正在使用钢铁斩

　　例2：

　function Yasuo(name){
         this.name = name;
         this.skill=function(){
          console.log(this.name+‘正在使用轻钢斩‘);
         }
   }
　function zhaoxin(name){
　　　　this.name=name;
　　　　Yasuo.call(this，name);
　　　}
　　　var hove=new zhaoxin(‘赵信‘);
　　　　console.log( hove.skill);　　　//赵信正在使用钢铁斩

例3：

　　function Yasuo(name){
         　　this.name = name;
   　　 }
     　　Yasuo.prototype.skill = function(){}

    　　 function Zhaoxin(name){
       　　 this.name = name;
      　　  Yasuo.apply(this)
  　　 }

    　　var hore = new Zhaoxin();
       
     　　hore.skill(‘赵信‘);        　　  //出错，

例4：

　　function Person(name,age,id){
       　　 this.name = name;
        　　this.age = age;
        　　this.id = id;
   　　 }
    　　Person.prototype = {
       　　 eat: function(){},
       　　 sleep : function(){}
   　　 }

    　　function Man(name,age,id,houjie){
      　　  Person.call(this,name,age,id) 
       　　 this.houjie = houjie;
       　　 this.work = function(){
            　　console.log(‘男人的工作‘)
        　　}
   　　 }

   　　 var wangshuai = new Man(‘ws‘,‘20‘,‘111111‘,‘true‘);
   　　 console.log(wangshuai);     

　　　　　　　　　　　　//   Man:

　　　　　　　　　　　　　　　age: "20"       houjie: "true"    id: "111111"          name: "ws"       work: ƒ ()         __proto__: Object

 

 

总结： call和apply 都可完成参数传递，

　　　call和apply 常用来继承属性,无法继承prototype内的方法