JS之bind浅析及应用场景

JavaScript010

JS之bind浅析及应用场景,第1张

fn.bind(obj, args)

bind() 方法会创建一个函数，该函数的 this 指向了传入的第一个参数，当 bind() 的参数为空时， this 指向全局对象。如浏览器中的 window 。

因为 js 是一门 Duck typing 语言，所以我们可以通过 bind 实现一些共有方法。

有的时候我们需要针对特定的 this 调用某些方法。写起来比较麻烦，这个时候就可以使用 bind 创建一个 shortcut 方便调用。

bind 也可以绑定构造函数，但是当执行生成的函数时，会忽略this指向，即使在绑定时已经对其赋值。

问题1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>Simple JQuery</title>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

$(function(){

$('#mybtn').bind('click', {a : 'hello', b : 'world'}, myFun)

})

function myFun(e) {

alert(e.data.a)

alert(e.data.b)

}

</script>

</head>

<body>

<input type="button" id="mybtn" value="Click me." />

</body>

</html>

如上面例子，可以传递多个参数。

-------------------------------------------------------

问题2：

$('<p>Test</p>').appendTo('.inner')

$('.inner').append('<p>Test</p>')

上面这个是append()和appendTo()区别，应该一目了然了吧？

而appendChild()不是jquery的方法，而是javascript原生的方法。

append和appendChild的关系是：

其实几乎一样，append就是调用appendChild实现的，只是在append前，做一个简单判断。下面贴下jquery的源代码：

append: function() {

return this.domManip(arguments, true, function( elem ) {

if ( this.nodeType === 1 ) {

this.appendChild( elem )

}

})

}

--------------------------------------------------

问题3：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>Simple JQuery</title>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

$(function(){

$('#mybtn').bind('click', myFun)

})

function myFun() {

alert($(this).attr('value'))

}

</script>

</head>

<body>

<input type="button" id="mybtn" value="Click me." />

</body>

</html>

第3个问题不是看的很明白？直接调用应该可以呀，看看这个例子是不是你想要的？

---------------------------------------------------

问题4：网上有很多，查看参考链接这个吧。