js中更改this指向 以及回顾bind、call和apply

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内的方法

 

 

js中更改this指向 以及回顾bind、call和apply

上一篇:虚拟环境之virtualenvwrapper


下一篇:iOS APP 如何做才安全