美文网首页
javascript this 相关总结

javascript this 相关总结

作者: jaminwong | 来源:发表于2016-11-29 23:44 被阅读0次

首先要搞清:

this是执行上下文(execution context)的属性 而不是变量对象(variable object)的属性。进入当前执行上下文,this值即以确定。
this不会参与到标识符解析过程(不会去作用域链中查找),它的值是直接从执行上下文中获取的。


this的值与函数调用方式密切相关:

方法调用模式

当函数被当作对象的方法(method)调用时,this会绑定到该对象。

var obj={
    name:'test',
    fun:function(){
            console.log(this.name) //test
         }
}
obj.fun()
obj['fun']()

函数调用模式

当一个函数并非某个对象的属性 其调用时,this 指向全局对象(严格模式 下this值为undefined),浏览器中就是window了。

function fun1  () {
    console.log(this)//Window
    function fun2() {
        console.log(this)//Window
    }
        fun2()
}
fun1()

构造器调用模式

构造函数用new调用,调用时背地里会创建一个连接到该函数prototypes属性的新对象,同时this也会绑定到该对象上。若构造函数返回值不是 一个对象(primitive value,或未明确指定返回值),则返回this。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

apply call bind 模式

call()和apply()

call apply 可以改变函数执行上下文中 this 的指向。当某个方法并不存在于某个对象 可以借助call或apply在该对象上调用该方法。

因为很像所以在很多情况下可以用两者均可
比如传统的继承写法中调用父构造函数:

call()和apply()的区别在于:

  • 借用call调用某方法时,该方法的参数会通过call的第一个之后的参数 以若干个参数的列表的形式传入。
  • 借用apply调用某方法时,该方法的参数会通过call的第二个参数 以一个包含多个参数的数组或类数组对象的形式传入。

因为这点不同 以下情况用apply()就非常合适, 而用call()就不合适了。

var  numbers = [1, 2, 3, 4 ]; 
var max = Math.max.apply(Math, numbers); //4
var max = Math.max.call(Math,1, 2, 3, 4); //4 这样就画蛇添足了。
bind()

bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

bind 和与其他两者有个重要区别: bind 是在函数定义阶段指定函数执行上下文的this指向,绑定之后不会立即去调用
关于bind call 和apply 要再写一篇总结详谈。

ES6 箭头函数中的this

箭头函数里面根本没有自己的this而是引用外层的this。
正因如此 在react中才可以这么用

  //constructor中使用“箭头”(=>)定义各种handle方法。函数内部的this其实就是组件实例。
  constructor(props) {
    super(props);
    this.state = {
    }
    this.cancelDelete = () => {
      const hid = this.props.host.hid;
      this.props.actions.cancelDelete(hid)
    }

    this.confirmDelete = () => {
      const hid = this.props.host.hid;
      this.props.actions.confirmDelete(hid)
    }
  }
//在render 中绑定事件时,就省去了手动绑定this的麻烦。
  render(){
      return(
       <button onClick={this.confirmEdit}>保存 </button>
       <buttononClick={this.cancelEdit}>取消</button>
     )
  }

相关文章

  • JavaScript 相关总结

    1、javascript类型有:数字(32位浮点)、字符串(String)、标识符(NaN 、Infinity、u...

  • javascript this 相关总结

    首先要搞清: this是执行上下文(execution context)的属性 而不是变量对象(variable ...

  • JavaScript数组去重算法实例

    本文主要介绍了JavaScript数组去重算法,结合实例形式总结分析了JavaScript数组去重相关的读写、遍历...

  • 关于 JavaScript 数字的那些事

    本文总结 JavaScript 语言中和数字相关的语言特性、缺陷与陷阱及使用技巧。相关基础内容请参考语言规范,本文...

  • es6-es7-es8新特性学习

    我们很难及时得知JavaScript(ECMAScript)中的最新功能,同时找到相关的示例代码更加困难。在此总结...

  • js中的 call()、apply()、bind()

    之前在 javascript this 相关总结一文中说要对call()、apply()、bind() 要再写一篇...

  • Web 前端学习网站汇总

    JavaScript 相关 ECMAScript 6 (ES6), JavaScript 相关链接汇总 Augul...

  • JS 转化方法总结

    一. 日期相关方法 请参考: JavaScript Date 对象方法总结 二. 删除数组某个指定元素 三. 千分...

  • Javascript相关

    对象: 两种方式访问对象属性,一种是点 . 另一种是中括号[]。 对象的增删改查。 正则: \s 空白字符[ " ...

  • JavaScript相关

    工具:Node.js mysql postman vscode MySqlworkbench 数据库框架Sequ...

网友评论

      本文标题:javascript this 相关总结

      本文链接:https://www.haomeiwen.com/subject/dnsepttx.html