JS之bind浅析及应用场景

JavaScript015

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:网上有很多,查看参考链接这个吧。