JS绑定种类汇总

这里是《你不知道的JS》中常见的this绑定种类分享:

1)默认绑定:

function foo(){
            console.log(this.a);
        }
        var a = 2;
        foo();//2

解析:foo()是直接使用不带任何修饰的函数引用进行调用的,因此只能使用默认绑定this指向全局对象

注意:严格模式下与foo()的调用位置无关:引擎会抛出TypeError: this is undefined的异常

2)隐式绑定:

function foo(){
            console.log(this.a);
        }
        var obj = {
            a:2,
            foo:foo
        };
        obj.foo();//2

解析:在这里 foo() 被调用时,落脚点确实指向obj对象,当函数引用有上下文对象时,隐式绑定规则会将函数调用中的this绑定到这个上下文对象,即this.a和obj.a是一样的

注意:对象属性引用链中只有最顶层或者说最后一层影响调用位置

function foo(){
            console.log(this.a);
        }
        var obj2 = {
            a:42,
            foo:foo
        };
        var obj1 = {
            a:2,
            obj2:obj2
        };
        obj1.obj2.foo();//42

3)显式绑定:

function foo(){
            console.log(this.a);
        }
        var obj = {
            a:2
        };
        foo.call(obj);//2

解析:call() 方法会将第一个参数绑定到this,在调用函数时指定这个this,上面示例即在调用foo时强制把他的this绑定到obj上

注意:显式绑定仍然无法解决丢失绑定问题

4)硬绑定:

function foo(){
            console.log(this.a);
        }
        var obj = {
            a:2
        };
        var bar = function(){
            foo.call(obj);
        };
        bar();//2
        setTimeout(bar,100);//2
        //硬绑定的bar不可能再修改它的this
        bar.call(window);//2

解析:在将foo的this强制绑定到obj后无论之后如何调用bar,都会在obj上调用foo

注意:硬绑定典型应用场景:创建一个包裹函数,传入所有的参数并返回接收到的所有值

function foo(something){
            console.log(this.a,something);//2 3
            return this.a+something;
        }
        var obj = {
            a:2
        };
        var bar = function(){
            return foo.apply(obj,arguments);
        };
        var b = bar(3);
        console.log(b);//5

由于硬绑定函数是一种非常常用的模式,所以在ES5中提供到了内置的方法:Function.prototype.bind

function foo(something){
            console.log(this.a,something);//2 3
            return this.a+something;
        }
        var obj = {
            a:2
        };
        var bar = foo.bind(obj);
        var b = bar(3);
        console.log(b);//5

注意:bind(...)会返回一个硬编码的新函数,它会把参数设置为this的上下文并调用原始函数

5)new绑定:JS中的new的机制实际上和其他面向类的语言完全不同,JS中"构造函数"是一些使用new操作符时被调用的函数

使用new调用函数,或者说发生构造函数调用时,会执行下面的操作:

#创建(构造)一个全新的对象
#这个新对象会被执行 [[原型]]连接
#这个新对象会绑定到函数调用的this
#如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象

function foo(a){
             this.a = a;
         }
         var bar = new foo(2);
         console.log(bar.a);//2

解析:使用new来调用 foo(...) 时,会构造一个新对象并把它绑定到 foo(...)调用中的this上

最后要说的是这几种绑定的优先级:

new绑定>显式绑定>隐式绑定>默认绑定

时间: 2024-09-28 20:02:18

JS绑定种类汇总的相关文章

原生js绑定和解绑事件,兼容IE,FF,chrome

主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解除这个事件.贴上代码,这个是可以运行的,兼容 IE FF chrome 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu

cocos2dx手写js绑定C++

这两天连续查阅了js绑定c++的非常多文章  , 有手动与自己主动两种方式 . 本来想用自己主动绑定的 , 可是NDK一直下载不下来.....就给算了 . 以下总结一下手动绑定的实现过程 : 一共三步 : 1 . 写原始 C++ 类 ( 一般放在自己定义类库里 ) 2.  用 C++ 逐个写 成员函数相应 的 绑定代码 ( 在自己定义类库中建立的manual_binding目录里) 3.  注冊所绑定过的函数( 在AppDelegate.cpp中 加入注冊函数 ) 4.  写js代码測试效果 1

JSBinding+SharpKit / 生成JS绑定

将 UnityEngine 的代码导出到 JS.就可以在 JS 中使用 Unity 的功能. 当你下载完 JSBinding 代码后 此文件已经正确配置好了.不需要再进行配置  只需要执行一下菜单即可. 首先需要配置 JSBindingSetting.cs 中的 classes 数组 这个数组代码了要导出的 C#  的类 在项目中  可以直接把 UnityEngine.dll 的所有类全部写进去  一次性全部导出 以后就不需要再逐个添加了 (这边是举例子 只添加一小部分类) // // JSBi

JS绑定事件和移除事件的处理方法

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函数和一个布尔值.最有这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /

node.js相关资料汇总

node.js API 英文原版 http://nodejs.org/api/all.html node.js API 中文翻译 http://nodeapi.ucdok.com/#/api/ node.js API 中文翻译下载 http://download.csdn.net/detail/bad19876414641/4608699 javascript API 下载 http://pan.baidu.com/share/link?shareid=1669066489&uk=4261436

jquery绑定事件以及js绑定事件

jquery绑定事件: <div id="click1">bind事件</div><!--如果有动态元素,不能触发--> <div id="click2">one</div><!--只能点击一次--> <div id="click3">live</div><!--已经弃用--> <div id="click4"&g

js绑定事件和解绑事件

在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法  只支持IE678,不兼容其他浏览器 addEventListener方法   兼容火狐谷歌,不兼容IE8及以下 addEventListener方法 div.addEventListener('click',fn); div.addEventListener('click',fn2); function fn(){ console.log("春

JS内存知识点汇总

废话片: 讲到内存可以联想到很多,内存分配管理,内存回收机制,内存泄露等等,今天我们就来答题的总结一下. 正文片: 1.内存分配管理 2.内存回收机制 3.内存泄露 一.内存分配管理 首先让我们看看内存的分配机制吧.其实在所有的语言中内存的分配都是一样的,首先在我们需要的时候记性内存的分配,然后是使用分配的内存,最后是当我们不适用的时候收回内存块. 问题:在js中是如何分配内存的呢,什么时候分配呢? 回答:在js中当我们定义了变量的时候实际上就为我们分配好了内存的,这样将会省去我们的很多麻烦.了

js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法

js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真(存在),假设为真则用attachEvent()方法.否则的话就用addEventListener(). 另外,为了避免每次绑定事件时都要做推断.能够封装一个函数myAddEvent(obj,ev,fn){}. 代码例如以下: <!DOCTYPE html> <html> <hea