js学习进阶中-bind()方法
有次面试遇到的，也是没说清楚具体的作用，感觉自己现在还是没有深刻的理解！
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()方法的更多相关文章
- JS学习进阶中 come on!
1,定义新的属性来扩展对象 新方法:defineProperty() 实例: var data = {}: Object.defineProperty(data,"type",{ ...
- 【转载】JS中bind方法与函数柯里化
原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
- 理解js中bind方法的使用
提到bind方法,估计大家还会想到call方法.apply方法:它们都是Function对象内建的方法,它们的第一个参数都是用来更改调用方法中this的指向.需要注意的是bind 是返回新的函数,以便 ...
- 【JS学习】String基础方法
前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 目录 定义: 字符串的连接: 标签模板的使用: 字符串的基本方 ...
- 【JS学习】数组过滤方法的使用filter
前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 使用效果: 可以返回参数函数为真的值 //情景:实现从stu数 ...
- Javascript中bind()方法的使用与实现
对于bind,我愣了下,这个方法常用在jquery中,用于为被选元素添加一个或多个事件处理程序. 查了下手册,发现bind的作用和apply,call类似都是改变函数的execute context, ...
- 纯静态界面中（html）中通过js调用dll中的方法从数据库中读取数据
最近接到一个离职员工的任务,一个搭好框架的ERP系统,看了两天,说一下看到的东西,整个项目目录中我没发现一个.aspx后缀的文件,全是静态HTML文件,之后发现他用的jquery简直看的头疼,不过大概 ...
- JS调用AngularJS中的方法
案例: 在IONIC中使用百度地图的JS版SDK,在该JS相关界面中需要触发点击事件来实现在Ionic的JS中定义的函数,参考方法如下: onclick="var $scope = angu ...
随机推荐
- bzoj 1711 [Usaco2007 Open]Dining吃饭&&poj 3281 Dining
最大流. 这东西好像叫三分图匹配. 源点向每个食物点连一条容量为1的边. 每个饮料点向汇点连一条容量为1的边. 将每个牛点拆点,食物点向喜欢它的牛的入点连一条容量为1的边,牛的出点向它喜欢的饮料点连一 ...
- ADO.net
五大对象: 1.Connection(连接数据库) 2.Command(执行T-SQL语句) 3.DataAdapter(用户填充DataSet,断开模式) 4.DataReader(读取数据库,一种 ...
- CentOS 6/7安装ffmpeg
环境 CentOS 6/7 安装 导入GPG key rpm --import http://packages.atrpms.net/RPM-GPG-KEY.atrpms 安装ATRPMS Repo ...
- Scrum meeting 记录
本周Scrum Master 侯宇泰 一. 工作完成内容记录 · 陈双: 1. 后端数据库Azure Storage设计 2. Offline 上传Movie信息 3. 主页和配音页面的连接 · 鲍航 ...
- Xcode 生成静态库相关设置：
Xcode 生成静态库相关设置: #Build Setting1. Architectures ------- Architectures -----> $(ARCHS_STANDARD) -- ...
- zabbix监控Java 8080端口
linux下端口和服务是对应的,Java进程启动时默认监听8080端口,如果服务挂掉则8080端口就没有了. lsof -i:8080 端口,如果没有任何的输出,说明该端口不在工作. 想在zabbix ...
- Android中使用ShareSDK集成分享功能
引言 现在APP开发集成分享功能已经是非常普遍的需求了.其他集成分享技术我没有使用过,今天我就来介绍下使用ShareSDK来进行分享功能开发的一些基本步骤和注意点,帮助朋友们避免一些坑.好了 ...
- volatile关键字 学习记录2
public class VolatileTest2 implements Runnable{ volatile int resource = 0; public static void main(S ...
- 多Form界面控件状态变化问题分析
假定有frmA,frmB,frmC三个界面,当frmA中触发显示frmC与frmB触发显示frmC时显示界面不同,或者让frmC上的某个按钮不可用,此时应该在如何来控制frmC的显示.是采用在frmC ...
- 《JavaScript高级程序设计（第3版）》笔记-第1章-JavaScript 简介
PS:第一章内容实在不多,就把前些日子看过的记录整理了一下,先发上来. 1.1 JavaScript 简史 1.JavaScript诞生前期目的主要是为了处理这种简单的表单验证. 1.2 JavaSc ...