javascript面向对象编程之this详解

发布时间:2019-12-16编辑:脚本学堂
本篇文章介绍下javascript中的this用法,这个this是js中的大坑啊,让人迷惹让人愁,它具有晚绑定的特性,相信看了本文,你的这些迷惹就会被稀释了,一切都豁然开朗了。

总结:
1.当函数作为对象的方法调用时,this指向该对象。
2.当函数作为淡出函数调用时,this指向全局对象(严格模式时,为undefined)
3.构造函数中的this指向新创建的对象
4.嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this。

总结的简单点就是:
如果在函数中使用了this,只有在该函数直接被某对象调用时,该this才指向该对象。
 

obj.foocoder();
foocoder.call(obj, ...);
foocoder.apply(obj, …); 

可能经常会写这样的代码:
 

$("#some-ele").click = obj.handler;

如果在handler中用了this,this会绑定在obj上么?显然不是,赋值以后,函数是在回调中执行的,this会绑定到$(“#some-div”)元素上。这就需要理解函数的执行环境。
这里要指出的时,理解js函数的执行环境,会更好地理解this。

如何能解决回调函数绑定的问题?ES5中引入了一个新的方法,bind():
 

fun.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg
当绑定函数被调用时,该参数会作为原函数运行时的this指向.当使用new 操作符调用绑定函数时,该参数无效.
arg1, arg2, ...
当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数.

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

显然bind方法可以很好地解决上述问题。
 

$("#some-ele").click(person.hello.bind(person));
//相应元素被点击时,输出foocoder says hello world  

其实该方法也很容易模拟,看下Prototype.js中bind方法的源码:
 

Function.prototype.bind = function(){
  var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();
  return function(){
    return fn.apply(object,
      args.concat(Array.prototype.slice.call(arguments)));
  };
};

明白了么?

被javascript中的this迷惹的朋友,相信你看完本文,已经思路清晰了不少吧,如此,脚本学堂会有莫大的满足,哈~~!
这里有一篇更为深入点的文章:javascript面向对象之this用法举例 ,大家不妨参考下。
 

您可能感兴趣的文章:

JavaScript面向对象编程(入门参考)
理解JavaScript中的面向对象
深入解析 Javascript 面向对象编程
JavaScript 面向对象的原型与实例分析
JavaScript面向对象的一个例子
JavaScript 面向对象(OOP)的语法参考
javascript面向对象之this用法举例
javascipt面向对象扩展的例子
javascipt面向对象之成员函数实例
javasrcipt 面向对象编程的例子