李锋涛

石看纹理山看脉,人看志气树看材

  • 主页
所有文章 友链 关于我

李锋涛

石看纹理山看脉,人看志气树看材

  • 主页

this 的四种绑定规则

2018-09-07

简单介绍this

1: 有对象,就指向调用对象
2:没有对象,就指向全局对象
3:用new构造,就指向新对象
4: 通过apply或call或bind来改变this的所指。

一:函数有所属对象时:指向所属对象。

函数有所属对象时,通常通过.表达式调用,这时this自然指向所属对象。
var myObject={value:100};
myObject.getValue=function(){
console.log(this.value)   //输出100

//输出 { value: 100, getValue: [Function] }
//其实就是myObject对象本身
console.log(this)  //输出的就是myObject对象

return this.value;
}
console.log(myObject.getValue());   //100  因为getValue() 的返回值 this.value,即是myObject.value

总结: getValue() 属于对象myObject,并且myObject进行.调用,因此this指向对象myObject

二:函数没有所属对象:指向全局对象

var myObject={value:100};
myObject.getValue=function(){
var foo=function(){
console.log(this.value)   //undefind  因为value 为被赋值
console.log(this)    //输出全局对象global
}
foo(); //函数调用

return this.value;  
}
console.log(myObject.getValue()); // => 100

总结:在上述代码中,foo函数虽然定义在getValue的函数体内,但实际上它既不属于getValue也不属于myObject.
foo并没有绑定在任何对象上,所以调用它是,他的this指针指向全局对象global.

三:构造器中的this:指向新对象

1:要以构造函数的方式调用函数,只需要在调用时在函数名称前加new 关键字
 使用构造器new一个对象时,this就指向新对象.this会绑定在新对象上。
 例: var oneObject=function(){
 this.value=100;
 }

 var myObj=new oneObject()
 console.log(myObj.value)  //100
 console.log(myObj)  //SomeClass {value: 100} value: 100__proto__: Object

四:apply和call调用以及bind绑定:指向绑定的对象

   var myObject={
        value:100
    }
    var foo=function(){
        console.log(this);  //window
        console.log(this.value);  //undefind
        console.log("...............");
    }
    foo();
    foo.apply(myObject);  //{value:100}
    foo.call(myObject);    //{value:100}
    var newFoo=foo.bind(myObject);   //{value:100}
    newFoo();

总结:foo本来指向全局对象window,但是call,apply和bind将this绑定到了myObject上,所以,
foo里,面的this就指向了myObject.
赏

谢谢你请我吃糖果

  • js

扫一扫,分享到微信

微信分享二维码
关于Es6的一些常用特性
react项目中遇到的一些问题
© 2018 李锋涛
Hexo Theme Yilia by Litten
  • 所有文章
  • 友链
  • 关于我

tag:

  • AngularJs
  • css
  • css3
  • js
  • Gulp
  • html5
  • react
  • Vue
  • bootstrap
  • css 布局
  • github
  • hexo
  • git
  • html
  • jQuery
  • webpack
  • ES6
  • app
  • hexo+github

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • 阮一峰
很惭愧

菜鸟一枚
笔记只为自己参考学习