javascript高级知识点——指定上下文实现
代码信息来自于http://ejohn.org/apps/learn/。
当我们将一个对象的点击事件绑定到一个事件触发元素时会发生什么?
<ul id="results">
</ul>
<script>
var Button = {
click: function(){
this.clicked = true;
}
}; var elem = document.createElement("li");
elem.innerHTML = "Click me!";
elem.onclick = Button.click;
document.getElementById("results").appendChild(elem); elem.onclick();
console.log( elem.clicked, "clicked属性被设置在点击的元素上面了" );
</script>
因为elem.onclick(),调用onclick时,this指向调用它的对象,也就是elem,所以发生错误。
我们需要固定上下文为原先的对象
function bind(context, name){
return function(){
return context[name].apply(context, arguments);
};
} var Button = {
click: function(){
this.clicked = true;
}
}; var elem = document.createElement("li");
elem.innerHTML = "Click me!";
elem.onclick = bind(Button, "click");
document.getElementById("results").appendChild(elem); elem.onclick();
console.log( Button.clicked, "点击属性被设置在了原先的对象上面" );
修改方法以适应所有的函数
Function.prototype.bind = function(object){
var fn = this;
return function(){
return fn.apply(object, arguments);
};
}; var Button = {
click: function(){
this.clicked = true;
}
}; var elem = document.createElement("li");
elem.innerHTML = "Click me!";
elem.onclick = Button.click.bind(Button);
document.getElementById("results").appendChild(elem); elem.onclick();
console.log( Button.clicked, "点击属性被设置在原先对象上面" );
最终目标,考虑到带参数的函数
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)));
};
}; var Button = {
click: function(value){
this.clicked = value;
}
}; var elem = document.createElement("li");
elem.innerHTML = "Click me!";
elem.onclick = Button.click.bind(Button, false);
document.getElementById("results").appendChild(elem); elem.onclick();
console.log( Button.clicked === false, "属性被设置在原先对象上面" )
javascript高级知识点——指定上下文实现的更多相关文章
- javascript高级知识分析——上下文
如果函数是一个对象的属性,那么它可以? var katana = { isSharp: true, use: function(){ this.isSharp = !this.isSharp; } } ...
- JavaScript高级知识点整理
一.JS中的数组 1.数组的三种定义方式 (1).实例化对象 var aArray=new Array(1,2,3,4,5); (2).快捷创建 var aTwoArray = [1,2,3,&quo ...
- javascript高级知识点——闭包
代码信息来自于http://ejohn.org/apps/learn/. 先给出一个权威的定义,函数对象可以通过作用域相互关联起来,函数体内的变量可以保存在函数的作用域内,这种特性称为闭包. 在闭包内 ...
- javascript高级知识点——memoization
memoization是一种非常有用的优化技术,它缓存特定输入产生的相应结果.这样麻烦的查找和迭代计算可以尽可能的减少. 它基本的思想是针对特定的输入,已经计算过的结果都是通过缓存当中的数据直接返回而 ...
- javascript高级知识点——函数的长度
代码信息来自于http://ejohn.org/apps/learn/. 函数的长度属性如何工作? function makeNinja(name){} function makeSamurai(na ...
- javascript高级知识点——内置对象原型
代码信息来自于http://ejohn.org/apps/learn/. 可以修改内置对象的方法. if (!Array.prototype.forEach) { Array.prototype.fo ...
- javascript高级知识点——继承
代码信息来自于http://ejohn.org/apps/learn/. 继承是如何工作的 function Person(){} function Ninja(){} Ninja.prototype ...
- javascript高级知识点——实例类型
代码信息来自于http://ejohn.org/apps/learn/. 分析一下对象的结构 function Ninja(){} var ninja = new Ninja(); console.l ...
- javascript高级知识点——函数原型
代码信息来自于http://ejohn.org/apps/learn/. 向函数的原型中添加方法 function Ninja(){} Ninja.prototype.swingSword = fun ...
随机推荐
- C#尝试读取或写入受保护的内存。这通常指示其他内存已损坏。
安装VS2013后,win7 + .net 4 + c#程序无法连接到SQL Server2000的实例 SQLServer2012在登录远程服务器实例时报错:尝试读取或写入受保护的内存. “尝试读取 ...
- php float 转int
round(x,prec) 参数 描述 x 可选.规定要舍入的数字. prec 可选.规定小数点后的位数. <?php echo(round(0.60)); echo(round(0.50)); ...
- Codeforces Round #245 (Div. 1)——Working out
题目链接 题意: 一个n*m的矩阵,每一个方格有一个非负数,如今选择两条线路:一个左上到右下,一个左下到右上,且仅仅能有一个公共点. 求两个线路上数的最大值(公共点不算) 分析: 仅仅有两种情况,dp ...
- URAL 1736 Chinese Hockey 网络流+建图
题目链接:点击打开链接 题意: 给定n个队伍的得分情况,输出随意一个可行解. n个队伍随意2个队伍 a, b 间有且仅有一场比赛. 比赛结果分4种: 1.a +3, b +0 2.a +0, b +3 ...
- 实用的JavaScript技巧、窍门和最佳实践
JavaScript是世界上第一的编程语言,它是Web的语言,是移动混合应用(mobile hybrid apps)的语言(比如 PhoneGap或者 Appcelerator),是服务器端的语言(比 ...
- Asp.Net(C#) MD5 加密
/// <summary> /// MD5 字符串加密 /// </summary> /// <param name="str">需要加密的字 ...
- C# AES,AesManaged使用学习
加密 static byte[] EncryptBytes_Aes(byte[] plainText, byte[] Key, byte[] IV) { // Check arguments. ) t ...
- android开发获取网络状态,wifi,wap,2g,3g.工具类(一)
android开发获取网络状态整理: package com.gzcivil.utils; import android.content.Context; import android.net.Con ...
- Android中 Http请求
HttpClient public class MainActivity extends Activity { private Button button; @Override protected v ...
- 异步消息处理机制——Handler用法
Handler 1. Message Messsge是线程之间传递的消息,它可以在内部携带少量的信息,用于在不同线程之间交换数据,Message的what字段,除此之外还可以使用arg1和arg2字段 ...