有次面试遇到的，也是没说清楚具体的作用，感觉自己现在还是没有深刻的理解！

bind():绑定事件类型和处理函数到DOM element(父元素上)

live()：绑定事件到根节点上，（document上）
Delegate(): 可动态添加事件，绑定到你指定的元素节点

下面就bind（）方法做一个例子实验：（已测试）

window.onload = function(){
window.name = "window";

var newObject = {
name : "object",

sayGreeting : function(){
alert("now this is easy"+" "+this.name);
nestedGreeting = function (greeting){
alert(greeting+" "+this.name);
}.bind(this);

nestedGreeting("hello");
}
};

newObject.sayGreeting("hello");
}

这个程序的输出：

now this is easy object

hello object

当去掉红色部分bind（）方法时输出第二个弹窗：hello window（想一下原因）

前面说过bind()方法绑定到父元素，也就是对象newObject上，this指的就是父类name值是object

如果去掉，嵌套函数nestedGreeting()对象的内部函数分离了，函数作用域变成了窗口对象的属性，name值为window

对于this的引用作用域没搞清楚，不知道到底作用哪个，有的说是就近，那这个例子中this就近谁呢，输出的怎么不一样，有大神能简单明了的说一下，不胜感激！！

最后提供一个页面倒计时展示bind（）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
#item {
font-size: 72pt;
margin: 70px auto;
width: 100px;
}
</style>
</head>
<body>
<div id = "item">
10
</div>
<script>
var theCounter = new Counter("item",10,0);
theCounter.countDown();

function Counter(id,start,finish){
this.count = this.start = start;
this.finish = finish;
this.id = id;
this.countDown = function (){
if(this.count ==this.finish){
this.countDown = null;
return;
}
document.getElementById(this.id).innerHTML = this.count--;
setTimeout(this.countDown.bind(this),1000);
}
}
</script>
</body>
</html>

好绕，没怎么明白this的用法！！！

js学习进阶中-bind()方法的更多相关文章

  1. JS学习进阶中 come on!

    1,定义新的属性来扩展对象 新方法:defineProperty() 实例: var data = {}: Object.defineProperty(data,"type",{ ...

  2. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  3. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  4. 理解js中bind方法的使用

    提到bind方法,估计大家还会想到call方法.apply方法:它们都是Function对象内建的方法,它们的第一个参数都是用来更改调用方法中this的指向.需要注意的是bind 是返回新的函数,以便 ...

  5. 【JS学习】String基础方法

    前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 目录 定义: 字符串的连接: 标签模板的使用: 字符串的基本方 ...

  6. 【JS学习】数组过滤方法的使用filter

    前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 使用效果: 可以返回参数函数为真的值 //情景:实现从stu数 ...

  7. Javascript中bind()方法的使用与实现

    对于bind,我愣了下,这个方法常用在jquery中,用于为被选元素添加一个或多个事件处理程序. 查了下手册,发现bind的作用和apply,call类似都是改变函数的execute context, ...

  8. 纯静态界面中（html）中通过js调用dll中的方法从数据库中读取数据

    最近接到一个离职员工的任务,一个搭好框架的ERP系统,看了两天,说一下看到的东西,整个项目目录中我没发现一个.aspx后缀的文件,全是静态HTML文件,之后发现他用的jquery简直看的头疼,不过大概 ...

  9. JS调用AngularJS中的方法

    案例: 在IONIC中使用百度地图的JS版SDK,在该JS相关界面中需要触发点击事件来实现在Ionic的JS中定义的函数,参考方法如下: onclick="var $scope = angu ...

随机推荐

  1. Android基础总结（八）

    服务两种启动方式(掌握) startService 开始服务,会使进程变成为服务进程 启动服务的activity和服务不再有一毛钱关系 bindService 绑定服务不会使进程变成服务进程 绑定服务 ...

  2. 基于python的selenium自动化测试环境安装

    1. Python2安装 官方网站:https://www.python.org/downloads/ (python3或新版本已经默认集成了pip包和path,安装的时候打勾就行,可以直接跳过下面第 ...

  3. java学习笔记之数组

  4. LinuxMint配置Git（图文教程）

    1.生成秘钥(直接回车,秘钥存放路径看命令行信息) 2．打开秘钥,需要注意的是.ssh可能是隐藏的,这时需要Ctrl+H显示隐藏文件夹 3．复制秘钥,添加到GitHub(Settings), 4.添加 ...

  5. 3 django系列之Form表单在前端web界面渲染与入库保存

    author: 温柔易淡(Leo),欢迎技术交流与拍砖 preface 我们在前端写表单的时候,其实可以使用django自带的forms功能来实现,特别是在处理 修改已经存在数据 的场景特别好用,下面 ...

  6. Material Design

    4.适应性设计 底层设计系统包括了交互和空间两部分.每一个设备都能反映出同一底层系统的不同侧面.每一设备的界面都会按照大小和交互进行调整.只有颜色,图标,层次结构和空间关系保持不变. 它不仅仅为了好看 ...

  7. mysql 常用函数整理

    1.length(字段名) 2.UNIX_TIMESTAMP(字段名) 3.FROM_UNIXTIME( 1249488000, '%Y%m%d' ) 4.ceil() 5.floor() 6.CAS ...

  8. 使用Microsoft Web Application Stress Tool对web进行压力测试

    Web压力测试是目前比较流行的话题,利用Web压力测试可以有效地测试一些Web服务器的运行状态和响应时间等等,对于Web服务器的承受力测试是个非常好的手法.Web 压力测试通常是利用一些工具,例如微软 ...

  9. Windows 7 OpenGL配置

    http://blog.csdn.net/qingyang8513/article/details/45155245

  10. R自动数据收集第二章HTML笔记2(主要关于htmlTreeParse函数)

    包含以下几个小的知识点 1htmlTreeParse函数源码和一些参数 2hander的写法 3关于missing函数 4关于if-else语句中else语句的花括号问题 5关于checkHandle ...