js中的this

责编:menVScode 2017-08-30 0:09 阅读(745)

        理解this

        this是js语言中的一个关键字,它代表着函数运行时,自动生成的内部对象。随着函数使用的场合不同,this的值也会发生变化,但总体遵循一个原则:this指的是调用这个函数的那个对象。

        this本质就是一个对象,对象是属性和方法的综合体。


        this五种情况

        全局环境下的this:window对象;

function fn(){    //
    console.log(this);
}
fn();   //fn  window.fn()

        对象方法中的this:作为对象的方法调用   方法里面的this所指向的就是当前这个对象;

var name="max";
var obj={
      name:"阳阳",
      fn:function(){
      	  var _this=this; //_this=>obj
          function foo(){
            console.log(this.name); // max this=>window
         	  console.log(_this.name); //this=>对象
         }
          foo(); //window.foo()
      }
};

        构造函数中的this:面向对象 保留;

        事件函数中的this:触发当前事件的Element对象;

var box = document.getElementById("box");
box.onclick=function(){   //事件函数  this
    console.log(this)    //Element对象
}

        apply、call中的this:函数对象中的方法;

        apply、call、bind是封装在Function构造函数的原型上,  Function.prototype.apply ,Function.prototype.call,Function.prototype.bind,就是给函数对象来使用的。要调用apply、call、bind方法前面必须是函数对象,通过new Function()可以创建函数对象,也可以通过function(){}创建。

        当调用函数对象.apply(),函数对象.call()的时候,改变当前函数对象中原本this指向。

var box = document.getElementById("box"); 
function fn(){
    console.log(this);
}
//fn(); //内部this指向window
box.oninput=function(){   //this   Element对象
    //内部this指向Element对象
    fn.call(this);//call方法能改变当前函数原本的指向,由window改变为Element对象。
}

        fn.call(this):1、首先调用当前的函数对象;2、改变函数对象内部原本的this指向。

var name="max";
function setName(){
     console.log(this.name);   //window==》obj.name
}
//setName();   window.setName

var obj={
  name:"阳阳",
  fn:function(){
  	console.log(this)   //obj
    	setName.call(this); //obj.setName
  }
};
obj.fn();//阳阳

        apply call   bind  改变函数对象中原本this指向。


        函数对象.bind(this,xxxx)   //函数对象的方法

         使用bind()方法会创建一个新的函数,新的函数会称为绑定函数。新函数与被调用函数具有相同的函数体,当目标函数调用this的值绑定到bind的第一个参数时,该参数不能被重写。绑定的函数被调用时,bind也会接受参数提供的原函数。

        1、bind作为函数对象的方法

        2 、作为函数对象调用bind的方法不会立即调用当前函数对象,会返回一个新的函数, 此时新函数与函数对象是一样的。此时函数对象中this 绑定了bind函数中的第一个参数。

var name="max";
var setName=function(){
     console.log(this.name);   
} 
setName.bind();// 函数对象调用bind的方法不会立即调用当前函数对象

var result = setName.bind();
console.log(result);//会返回跟原函数对象一样的一个新函数
                    //function(){console.log(this.name)}
//
//
//
//

        3、例子

var id="window";
var test=function(){
     console.log(this.id);   
};
var obj={
    id:"obj",
    fn:test     //函数  test
}
obj.fn(); //obj


var id="window";
var test=function(){
     console.log(this.id);   
}.bind(window); //得到一个新的函数,传入参数window将this指向window  中间层

var obj={
    id:"obj",
    fn:test     //函数  test
}
obj.fn();     //window

        4、bind传参

var color="red";
var o={color:"blue"};

function setColor(){
  console.log(this.color);
}

var result=setColor.bind(o);   //返回一个新的函数
// var result = function setColor(){console.log(this.color)}
//使用.bind(o)的时候,将新函数的内部的this指向变为o的对象了
result();//blue
var color="red";
var o={color:"blue"};

function setColor(a,b){
  console.log(arguments);
  console.log(this.color);
}

var result=setColor.bind(o);   //新的函数
result(1,2);

/*//得到的新函数 
function setColor(a,b){
    consol.log(arguments); //[1,2,callee:f,...]
    console.log(this.color); //this =》o.color
}
*/
/*----------------------------*/
var color="red";
var o={color:"blue"};

function setColor(a,b){
  console.log(arguments);
  console.log(this.color);
}

var result=setColor.bind(o,3); //新的函数,bind除了绑定this外,还可以传递参数
result(1,2);

/*//得到的新函数 
function setColor(a,b){
    consol.log(arguments); //[3,1,2,callee:f,...],总共得到三个参数
    console.log(this.color); //this =》o.color
}
*/
标签: this js
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码