javascript下动态this与动态绑定实例代码

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

一个简单的例子:
[script]
<script>
window.name = "window";
var run = function() {
alert("My name is " + this.name);
}
run();
</script>
[/html]
这里你不能说run是作为window的一个属性而存在,但它的确是被window属性调用了。实质上大多数暴露在最上层的东西都则window接管了。在它们需要调用时被拷贝到window这个对象上(不过在IE中window并不继承对象),于是有了window['xxx']与window.xxx性能上的差异。这是内部实现,不深究了。
另一个例子,绑定到一个明确的对象上

window.name = "window";
object = {
name: "object",
run: function() {
alert("My name is " + this.name);
}
};
object.run();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

window.name = "window";
object = {
name: "object",
run: function() {
var inner = function(){
alert("My name is " + this.name);
}
inner();
}
};
object.run();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

window.name = "window";
var object = {
name: "object",
run: function() {
inner = function() {
alert( this.name);
}
inner.call(this);
}
}
object.run();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

window.name = "Window";
var cat = {
name: "Cat"
};
var dog = {
name: "Dog",
sound: function(word) {
alert(this.name + word);
}
};
dog.sound(" is pooping");
dog.sound.call(window, " is banking");
dog.sound.call(dog, " is banking");
dog.sound.apply(cat, [" miaowing"]);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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


代码如下:

var bind = function(context, fn) {
return function() {
return fn.apply(context, arguments);
}
}

window.name = "Window";
var cat = {
name: "Cat"
};
var dog = {
name: "Dog",
sound: function(word) {
alert(this.name + word);
}
};
var bind = function(context, fn) {
return function() {
return fn.apply(context, arguments);
}
}
var sound2 = bind(window,dog.sound);
sound2(" is banking");
var sound3 = bind(cat,dog.sound);
sound3(" miaowing")

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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


代码如下:

function bind(context,fn) {
var args = Array.prototype.slice.call(arguments, 2);
return args.length == 0 ? function() {
return fn.apply(context, arguments);
} : function() {
return fn.apply(context, args.concat.apply(args, arguments));
};
};

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


代码如下:

var bindAsEventListener = function(context, fn) {
return function(e) {
return fn.call(context, (e|| window.event));
}
}

Prototype的版本


代码如下:

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

Function.prototype.bind = function() {
if (arguments.length

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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


代码如下:

//在chrome中
var a = function(){};
alert(a.bind)

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

for(var i in Array){
alert(i + " : "+ Array[i])
}
for(var i in Array.prototype){
alert(i + " : "+ Array.prototype[i])
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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


代码如下:

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

示例以前也给过了,请见文章
总结:
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 的值。由于它们存在,我们得以创建各种有用的函数。

(0)

相关推荐

  • js循环动态绑定带参数函数遇到的问题及解决方案[转]

    众所周知,不带参数的绑定非常简单,只要使用(语法:"document.getElementById("对象ID名").attachEvent("事件名,如onchange",函数名);")(示例:"document.getElementById("select_0").attachEvent("onchange",modifyFunction);")即可.(注:以下只写示例) 带参数的绑

  • vue.js删除动态绑定的radio的指定项

    上图效果,动态添加绑定radio选项,然后也可以动态删除,右边编辑器删除,左边的视图也对应的删除. 视图代码 view: "<ul><li v-for='option in options'>" + "<input type='radio' :name='groupName'>{{option.text}}" + "</li></ul>", 数据绑定model.options: opti

  • 详解Vue.js动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM "绑定"到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新.基于这种特性,通过vue.js动态绑定class就变得非常简单. 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: <a v-bind:href="http://www.cnblogs.c

  • Javascript动态绑定事件的简单实现代码

    下面是页面的dom结构 复制代码 代码如下: <ul id="test"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> 下面是javascript代码 复制代码 代码如下: //根据ID获取对象 function id(v) { return document.getElementById(

  • vue.js选中动态绑定的radio的指定项

    上一文,介绍了vue.js动态添加.删除绑定的radio选项,本文介绍如何选中radio的某一项 绑定的数据和上文的model是一致的,选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中. 选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用checked='true',判断是否需要渲染ch

  • JavaScript动态绑定详解

    问题描述: 假设我们的网页中动态生成了一个按钮,在这个按钮生成之前我们按照一般的事件绑定方法为此按钮绑定了触发事件,但是问题是绑定的事件并没有生效(JavaScript中为元素绑定的事件失效) 分析 1.首先我们来看一下这个按钮是怎么回事: 问题中按钮有一个很关键的特性:动态生成,也就是说是在网页加载完成之后执行某些操作才产生的,它一开始是不存在的: 2.然后我们来分析一下事件的绑定 对于动态生成的元素,它不同于一般的网页既有元素,它的事件绑定不能通过普通的事件绑定实现. 3.关于JavaScr

  • AngularJS动态绑定HTML的方法分析

    本文实例讲述了AngularJS动态绑定HTML的方法.分享给大家供大家参考,具体如下: 在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写),这样的需求,更是遍地皆是. 对于对angular的读者肯定首先会想到ngBindHtml,对,angular为我们提供了这个指令来动态绑定HTML,它会将计算出来的表达式结果用innerHTML绑定到DOM.

  • AngularJS单选框及多选框实现双向动态绑定

    在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令. 一.ng-model ng-model指令用来将input.select.textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它将当前作用域中运算表达式的值同给定的元素进行绑定.如果属性不存在,它会隐式创建并将其添加到当前作用域中. 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! <input type="te

  • AngularJS 单选框及多选框的双向动态绑定

    AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示: <input type="text" ng-model="topic.title" /> 只需要用ng-model 与 $scope 中的属性对应,即实现了type="text" 的双向动态绑定.当 <input type="radio" /> 及 <inpu

  • Chrome扩展页面动态绑定JS事件提示错误

    问题描述: 当开发Chrome扩展时,页面的popup.html中需要js的时候,直接将JS写在动态绑定JS事件会提示: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".. 解决办法: 在popup.html中引用外部的js文件动态绑定JS

随机推荐