this用法

Posted on | In | | 次阅读

一.

(1)javascript的宿主环境是web浏览器，浏览器环境需要提供一些接口
javascript引擎才是真正执行代码的地方，e.g V8，Javascript core
(2)Javascript的宿主环境是nodejs，对应引擎是V8

二.global this

this == window对象
(1)声明变量没有var/let -> 给全局的this添加或改改变属性值
(2)node环境中 REPL：交互的编程环境

  1. 执行js脚本，全局范围内this以一个空对象开始作为最高级的命名空间，this不等同于global
  2. 执行js脚本，用REPL执行一个脚本，用var声明一个变量不会将变量添加给this
    执行js脚本，不用REPL执行一个脚本，用var声明一个变量会将变量添加给this
    （和浏览器中一样）
  3. 声明变量无var和let
    ||global对象|this|
    |-|–|–|
    |用REPL执行|有|无|
    |直接执行|有|有|

  4. 浏览器 this == window，this最大
    node
    执行写好的：声明的变量不会自动添加到this，会自动添加global
    一行行执行：global最大，global=this，声明的变量自动添加到this和global

三.function this

  1. 指代全局范围内this
  2. 严格 –> this变成undefined
  3. 调用函数前有new，this变成一个新值，this不等于global
  4. 绑定事件处理程序，this指代事件处理程序对应的对象 e.g button

四.prototype this

prototype:每一个函数都是函数对象，会自动获得一个特殊属性prototype；用new方法调用函数，可以用this访问给prototype赋的值

  1. 1
    2
    3
    Thing.prototype.foo = "bar"
    var thing = new Thing
    console.log(thing.foo) //"bar"

  2. 实例中this是一个特殊对象，new之后会隐藏同名属性

  3. 从一个function中new的实例，会共享所有的prototype赋值
  4. 可形成原型链，this会一层一层寻值
    Thing1.prototype.foo = “bar”
    Thing2.prototype = new Thing1
    原型链中重新赋值，就会隐藏本身的值
  5. 嵌套函数 中的this没有继承 –> undefined
    把一个实例的方法当成一个值，把值当成函数参数传给另一个函数，但不把实例传给这个函数
    –> 环境变为全局global

  6. 把this捕捉到变量里 self （改变undefined）

    1
    2
    3
    4
    Thing.prototype.logFoo = function(){
    	var self = this
    	//可调用self.foo
    }

  7. 把一个方法作为一个值传递给一个函数无效

    1
    2
    3
    4
    function doItIndirectly(method) {
    	method()
    }
    doItIndirectly(thing.logFoo) //logs undefined

  8. 使用bind解决

    1
    doItIndirectly(thing.logFoo.bind(thing)) //logs bar

  9. 使用apply和call解决

    1
    2
    3
    Thing.prototype.logFoo = function () {
    	doIt.apply(this)
    }

  10. 用Object.create(Thing.prototype)替换new

五.object this

  1. 用apply将function绑定到var obj上
  2. 只有有相同直接父元素的属性才能通过this共享变量，即元素嵌套不可以
  3. 嵌套后可以直接用obj.foo调用

六.DOM event this

HTML DOM事件处理程序里，this始终指向DOM节点

七.HTML this

八.重写this

不可override

九.with this

with 将this添加到当前环境
Thing.prototype.logFoo = function () {
with(this) {
}
}

十.jQuery this

this指向HTML元素节点
e.g $( ).each

十一.thisArg this