zoukankan      html  css  js  c++  java
  • javascript的动态this与动态绑定

     http://www.cnblogs.com/rubylouvre/archive/2009/11/13/1602122.html

    javascript是一门动态语言,最明显就是那个dynamic this。它一般都是作为函数调用者存在。在javascript,所有关系都可以作为对象的一个关联数组元素而存在。那么函数就是被掰成两部分储存于对象,一是其函数名(键),一是函数体(值),那么函数中的this一般都指向函数所在的对象。但这是一般而已,在全局调用函数时,我们并没有看到调用者,或者这时就是window。不过,函数声明后,其实并没有绑定到任何对象,因此我们可以用call apply这些方法设置调用者。

    一个简单的例子:

    1.window.name = "window";
    2.var run = function() {
    3.  alert("My name is " + this.name);
    4.}
    5.run();

    这里你不能说run是作为window的一个属性而存在,但它的确是被window属性调用了。实质上大多数暴露在最上层的东西都则window接管了。在它们需要调用时被拷贝到window这个对象上(不过在IE中window并不继承对象),于是有了window['xxx']与window.xxx性能上的差异。这是内部实现,不深究了。

    另一个例子,绑定到一个明确的对象上

    1.window.name = "window";
    2.object = {
    3.  name: "object"
    4.  run: function() {
    5.    alert("My name is " + this.name);
    6.  }
    7.};
    8.object.run();

    答案显然易见,this总是为它的调用者。但如果复杂一点呢?

    01.window.name = "window";
    02. object = {
    03.   name: "object",
    04.   run: function() {
    05.     var inner = function(){
    06.       alert("My name is " + this.name);
    07.     }
    08.     inner();
    09.   }
    10. };
    11. object.run();

    尽管它是定义在object内部,尽管它是定义run函数内部,但它弹出的既不是object也不是run,因为它既不是object的属性也不是run的属性。它松散在存在于run的作用域用,不能被前两者调用,就只有被window拯救。window等原生对象浸透于在所有脚本的内部,无孔不入,只要哪里需要到它做贡献的地方,它都义不容辞。但通常我们不需要它来帮倒忙,这就需要奠出call与apply两大利器了。

    01.window.name = "window";
    02.var object = {
    03.  name: "object",
    04.  run: function() {
    05.    inner = function() {
    06.     alert( this.name);
    07.    }
    08.    inner.call(this);
    09.  }
    10.}
    11.object.run();

    call与apply的区别在于第一个参数以后的参数的形式,call是一个个,aplly则都放到一个数组上,在参数不明确的情况,我们可以借助arguments与Array.slice轻松搞定。

    01.window.name = "Window";
    02.var cat = {
    03.  name: "Cat"
    04.};
    05.var dog = {
    06.  name: "Dog",
    07.  sound: function(word) {
    08.    alert(this.name + word);
    09.  }
    10.};
    11.dog.sound(" is pooping");
    12.dog.sound.call(window, " is banking");
    13.dog.sound.call(dog, " is banking");
    14.dog.sound.apply(cat, [" miaowing"]);

    由此Prototype开发者搞了一个非常有名的函数出来,bind!以下是它的一个最简单的版本:

    1.var bind = function(context, fn) {
    2.  return function() {
    3.    return fn.apply(context, arguments);
    4.  }
    5.}

    不过为了面对更复杂的情况建议用以下版本。

    1.function bind(context,fn) {
    2.  var args = Array.prototype.slice.call(arguments, 2);
    3.  return args.length == 0 ? function() {
    4.    return fn.apply(context, arguments);
    5.  } : function() {
    6.    return fn.apply(context, args.concat.apply(args, arguments));
    7.  };
    8.};

    它还有一个孪生兄弟叫bindAsEventListener ,绑定事件对象,没什么好说的。

    1.   
    2.var bindAsEventListener = function(context, fn) {
    3.    return function(e) {
    4.        return fn.call(context, (e|| window.event));
    5.    }
    6.}

    Prototype的版本

    01.Function.prototype.bind = function() {
    02.   if (arguments.length < 2 && (typeof arguments[0]==='undefined'))
    03.     return this;
    04.   var _slice = Array.prototype.slice
    05.   var __method = this, args = _slice.call(arguments,0), context = args.shift();
    06.   return function() {
    07.     return __method.apply(context, args.concat(_slice.call(arguments,0)));
    08.   }
    09. }

    bind函数是如此有用,google早早已把它加入到Function的原型中了(此外还有inherits,mixin与partial)。

    有绑定就有反绑定,或者叫剥离更好!例如原生对象的泛化方法我们是无法通过遍历取出它们的。

    1.for(var i in Array){
    2.  alert(i + " : "+ Array[i])
    3.}
    4.for(var i in Array.prototype){
    5.  alert(i + " : "+ Array.prototype[i])
    6.}

    要取出它们就需要这个东西:

    1.var _slice = Array.prototype.slice;
    2.function unbind(fn) {//第一步取得泛化方法
    3.  return function(context) {//第二部用对应原生对象去重新调用!
    4.    return fn.apply(context, _slice.call(arguments, 1));
    5.  };
    6.};

    示例以前也给过了,请见这里

    总结:

    this 的值取决于 function 被调用的方式,一共有四种,

    • 如果一个 function 是一个对象的属性,该 funtion 被调用的时候,this 的值是这个对象。如果 function 调用的表达式包含句点(.)或是 [],this 的值是句点(.)或是 [] 之前的对象。如myObj.func 和myObj["func"] 中,func 被调用时的 this 是myObj。
    • 如果一个 function 不是作为一个对象的属性,那么该 function 被调用的时候,this 的值是全局对象。当一个 function 中包含内部 function 的时候,如果不理解 this 的正确含义,很容易造成错误。这是由于内部 function 的 this 值与它外部的 function 的 this 值是不一样的。解决办法是将外部 function 的 this 值保存在一个变量中,在内部 function 中使用它来查找变量。
    • 如果在一个 function 之前使用 new 的话,会创建一个新的对象,该 funtion 也会被调用,而 this 的值是新创建的那个对象。如function User(name) {this.name = name}; var user1 = new User("Alex"); 中,通过调用new User("Alex") ,会创建一个新的对象,以user1 来引用,User 这个 function 也会被调用,会在user1 这个对象中设置名为name 的属性,其值是Alex 。
    • 可以通过 function 的 apply 和 call 方法来指定它被调用的时候的 this 的值。 apply 和 call 的第一个参数都是要指定的 this 的值。由于它们存在,我们得以创建各种有用的函数。
  • 相关阅读:
    使用pjsip传输已经编码的视频
    xubuntu14.04下编译pjsip及pjsua2 java
    解决 Python.h:没有那个文件或目录 错误的方法
    HIbernate與不支持boolean的數據庫之間的映射
    js数组的操作
    jQuery中ajax的使用与缓存问题的解决方法
    网络游戏中应用可插拔工厂处理消息
    How to Train Triplet Networks with 100K Identities?
    (转)如何用TensorLayer做目标检测的数据增强
    图像超分辨-IDN
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/1602312.html
Copyright © 2011-2022 走看看