`
lp895876294
  • 浏览: 284760 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

javascript原生bind方法详解

    博客分类:
  • JS
 
阅读更多

bind()方法,是javascript原生的函数类的一个原型方法(即Function.prototype里的方法),不支持ie低版本.

基本格式:

function.bind(obj1,obj2,obj3...);

其中,function是一个方法属性,obj1是执行此方法的this上下文,obj2及之后的参数,是执行function时传入的参数。

 

bind方法有两个用处:

1.用来改变function方法中的上下文。

2.给function方法传入参数。

 

bind方法和apply方法,call方法的区别:

1.最大的区别是,bind方法是返回一个改变了上下文和参数的新方法,而不是执行了function

2.bind方法传入的参数(obj2及之后的参数),调用的时候会使用这两个参数,但是调用的时候还可以再接着传入新的参数,与bind时候的参数一起被传入并执行。

 

具体的用法:用法1: 无参数,仅仅改变方法的上下文:

<script type="text/javascript">

var Class = function(name,job){
    this.name = name;
    this.job = job;
};
var jyh = new Class('jyh','web-front-end');
var zxg = new Class('zxg','php');
//给jyh实例添加私有方法:
jyh.intro = function(){console.log(this.name)};
//给jyh实例添加一个相同私有方法,但是使this上下文指向zxg实例:
//注意,使用bind方法,是不执行方法的,只是改变方法里的上下文,返回一个新的方法;
jyh.introOther = jyh.intro.bind(zxg);
jyh.intro(); //指针指向自己
jyh.introOther(); //指针指向zxg

</script>

 用法2: 改变方法的上下文,并且带有参数:

<script type="text/javascript">
var Class = function(name){
    this.name = name;
};
var jyh = new Class('jyh');
var zxg = new Class('zxg');
//给jyh实例添加私有方法:
jyh.intro = function(job){console.log(this.name+','+job)};
//给jyh实例添加一个相同私有方法,但是使this上下文指向zxg实例:
//注意,使用bind方法,是不执行方法的,只是改变方法里的上下文,并且传入执行该方法时的参数
//注意,参数是在bind的同时定义的,而不是执行的时候定义的,详细参考bing-3.html
jyh.introOther = jyh.intro.bind(zxg,'php');
jyh.intro('web-front-end');    //指针指向自己,传入参数
jyh.introOther();
</script>

 用法3: 改变方法的上下文,并且传入的参数中带有this:

<script type="text/javascript">

var Class = function(name){
    this.name = name;
};
var jyh = new Class('jyh');
var zxg = new Class('zxg');
//给jyh实例添加私有方法:
jyh.intro = function(job){console.log(job)};
//给jyh实例添加一个相同私有方法,但是使this上下文指向zxg实例:
//注意,bind方法,第二个参数开始,this指向决定于bind的时候,而非调用的时候,
//如果在这里使用bind,无论在何处执行jyh.introOther,得到的结果都是 zxg,[object Window]
jyh.introOther = jyh.intro.bind(zxg,this);
jyh.intro('web-front-end');    //指针指向自己,传入参数

var Klass = function(name){
    this.name=name;
    this.init();
};
Klass.prototype.init=function(){
    console.log(this);
    //如果在这里使用bind,this指向就是Klass的实例;
    //打开注释,this指向klass,关闭注释,根据第22行定义的,this指向window
//    jyh.introOther = jyh.intro.bind(zxg,this);
    //和在哪里调用没有关系
    jyh.introOther();
};
//将Klass实例化时,调用jyh.introOther(),this指向就是klass;
var klass = new Klass('klass');

</script>

 用法4: 改变方法的上下文,有参数,并且执行的时候再添加新传入的参数:

<script type="text/javascript">

var Class = function(name){
    this.name = name;
};
var jyh = new Class('jyh');
var zxg = new Class('zxg');
//给jyh实例添加私有方法:
jyh.intro = function(job,love,appearance){console.log(this.name+','+job+','+love+','+appearance)};
//给jyh实例添加一个相同私有方法,但是使this上下文指向zxg实例:
//注意,使用bind方法,是不执行方法的,只是改变方法里的上下文,并且传入执行该方法时的参数
jyh.introOther = jyh.intro.bind(zxg,'php');
jyh.intro('web-front-end','rabbit','bad');    //指针指向自己,传入参数
//除了bind时候传入的参数,执行的时候还可以继续传入参数,bind时传入的参数和执行时传入的参数,依次作为参数被传入执行
jyh.introOther('dog','handsome');

</script>

 用法5: 不改变上下文,仅仅为了传参而使用bind:

<script type="text/javascript">
var Class = function(name){
    this.name = name;
};
var jyh = new Class('jyh');
//给jyh实例添加私有方法:
jyh.intro = function(job,love){console.log(job+','+love)};
//尤其适合用在setInterval方法,需要传入空对象{}在第一个参数的位置
var t = setInterval(jyh.intro.bind({},'web-front-end','rabbit'),3000)
</script>

 

分享到:
评论

相关推荐

    JQuery详解jQuery的bind方法

    ### JQuery详解:jQuery的bind方法 #### 一、概述 jQuery 的 `bind()` 方法是用于在元素上绑定事件处理程序的一种方式。与原生 JavaScript 的事件绑定相比,`bind()` 提供了更多灵活性和便捷性。它允许开发者指定...

    Javascript中call,apply,bind方法的详解与总结

    本文针对JavaScript中三个重要的函数方法——call、apply和bind,进行详尽的分析,并在文章的结尾部分对这三个方法之间的联系和区别进行了概括,以便于读者更深入地理解它们的用途和应用场景。 首先,我们来探讨...

    如何手动实现es5中的bind方法详解

    需要注意的是,这种手动实现的方法在某些特殊情况下,比如绑定原型链时,并不能完全模拟原生bind的所有行为,因为原生bind会创建一个原函数的硬链接,而手动实现可能在某些复杂的原型链场景下遇到问题。 经过本文的...

    JavaScript函数柯里化详解_.docx

    在不支持`bind`原生方法的环境中,可以使用如上所示的仿造版本。`Function.prototype.mybind`扩展了`Function`对象,使得任何函数都可以使用`mybind`方法来实现类似`bind`的功能。 总的来说,柯里化和`bind`都是...

    JavaScript函数柯里化详解

    对于不支持`bind`原生方法的环境,我们可以使用类似上述的实现来模拟`bind`功能。例如,`Function.prototype.mybind`是一个模仿原生`bind`的实现,它首先尝试使用原生`bind`,如果不存在,则提供一个自定义的实现。...

    Firemonkey在Android平台上增强浏览器与JavaScript的交互

    通过增强浏览器与JavaScript的交互,开发者可以利用Web技术实现更多复杂的业务逻辑和用户交互,同时保持原生应用的性能和外观。 【知识点详解】 1. **FireMonkey (FMX) 和WebView组件**: - FireMonkey是...

    详解Jquery实现ready和bind事件

    ### jQuery实现ready和bind事件知识点详解 #### Jquery ready事件 在JavaScript中,页面加载完成后执行一段代码是一个非常常见的需求。传统上,我们会使用`window.onload`事件来实现这一点。但`window.onload`有其...

    jQuery bind事件使用详解

    jQuery的`bind`方法是其事件处理功能的核心之一,它允许开发者将函数绑定到DOM元素上的特定事件。本文将深入探讨`bind`方法的使用,包括它的基本用法、多事件绑定、自定义事件和命名空间等特性。 首先,`bind`方法...

    sqljs是SQLite数据库的一个JavaScript移植

    然而,由于JavaScript原生不支持C/C++级别的数据库操作,因此在浏览器中直接使用SQLite并不现实。sql.js的出现填补了这一空白,它利用Emscripten将SQLite的C代码编译为可以在浏览器中运行的WebAssembly代码,实现了...

    [jQuery] 事件和动画详解

    相比于JavaScript原生的`window.onload`,`$(document).ready()`方法在DOM结构构建完毕时就会执行,而不需要等待所有资源(如图片、脚本)都加载完毕。`$(document).ready()`可以简写为`$(function() {})`。此外,`$...

    jQuery绑定事件监听bind和移除事件监听unbind用法实例详解

    ### jQuery绑定事件监听bind()与移除事件监听unbind()用法详解 #### 1. jQuery事件监听概念 在网页设计中,事件监听是一种常见的需求,主要作用是当用户与网页上的元素发生交互时,能够触发特定的代码执行,响应...

    jQuery API 详解 中文版

    jQuery简化了许多原生JavaScript操作,如$.extend()用于合并对象,$.noop()定义空函数,$.proxy()用于改变函数的作用域。此外,还涉及到了事件处理,如$.on()和$.off(),以及$.is()和$.not()等条件判断方法。 **第...

    ES6中javascript实现函数绑定及类的事件绑定功能详解

    这种方法在使用原生JavaScript时尤其有用,因为它允许开发者在解绑事件时通过回调函数来区分到底解除绑定了哪一个事件监听器。 ```javascript class A { bindEvent() { let that = this; this.button1.on('click...

    ajax中各种框架的应用和详解

    - **事件处理**:Prototype改进了原生的事件处理机制,提供了更易于使用的`observe()`和`stopObserving()`方法。 - **Ajax功能**:Prototype提供了`Ajax.Request`和`Ajax.Updater`等类,用于发起和管理AJAX请求,...

    JavaScript中双向数据绑定详解

    本文将深入探讨JavaScript中的双向数据绑定机制,并提供一个基于jQuery以及原生JavaScript的双向数据绑定的实现方法。 ### 双向数据绑定的概念 双向数据绑定是现代Web框架中的一个重要特性,它简化了用户界面与...

    详解Html5原生拖拽操作

    《HTML5原生拖拽操作详解》 HTML5作为现代网页开发的标准之一,提供了许多增强用户体验的新特性,其中之一就是原生的拖放(Drag and Drop)功能。本文将深入探讨如何利用HTML5实现这一功能,以及解决在不同浏览器中...

    js框架prototype 1.6 中文参考手册 天涯浪子

    6. **Function对象**:Prototype扩展了JavaScript的Function对象,提供了如`bind()`、` curry()`和`wrap()`等方法,增强了函数作为第一级公民的能力。 7. **Script.aculo.us**:Prototype 1.6版本通常与Script....

    jQuery:unbind方法的使用详解

    `unbind`方法是jQuery中用于清理和管理事件绑定的关键工具,但使用时要注意其限制,尤其是它不能解绑原生JavaScript或HTML属性绑定的事件。在大型项目中,合理地使用`unbind`可以提高代码的可维护性和性能。希望本文...

Global site tag (gtag.js) - Google Analytics