这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
apply/call/bind 三者的联系就在于,都可以用来改变函数中 this 指向的值,且第一个参数为要指向的 this 的值,apply 的第二个参数(或 bind 与 call 的不定参数)为要传入的参数。这就不得不提及 javascript 中函数的 this 的指向了。下面我们来简单探讨下
fun.apply(context,[argsArray])
立即调用 fun,同时将 fun 函数原来的 this 指向传入的新 context 对象,实现同一个方法在不同对象上重复使用。
context: 传入的对象,替代 fun 函数原来的 this;
argsArray: 一个数组或者类数组对象,其中的数组参数会被展开作为单独的实参传给 fun 函数,需要注意参数的顺序。
fun.call(context,[arg1],[arg2],[…])
同 apply,只是参数列表不同,call 的参数需要分开一个一个传入。如果不知道参数个数,则使用 apply。
使用:
Math.max() // 只接收单独的参数,通过下面的方法可以在数组上面使用 max 方法: Math.max.apply(null, array); // 会将 array 数组参数展开成单独的参数再传入 Array.prototype.push.apply(arr1,arr2); // 将一个数组拆开 push 到另一个数组中;不用 apply 则会将后续数组参数当成一个元素 push 进去。 Array.prototype.slice.call(arguments); // 在类素组对象上使用 slice 方法
- function isArray(obj){
- return Object.prototype.toString.call(obj) === '[object Array]' ;
- } //验证是否是数组
fun.bind(context,[arg1],[arg2],[…])
使 fun 方法执行的 context 永不变。
arg1: 要传递到新函数的参数列表
返回一个函数供后续调用,其函数体和原函数 fun 一样,但新函数的 this 指向新传入的 context 对象。新函数会具有 bind 方法指定的初始参数 arg1/arg2...,后续调用新函数时的实参要往已有参数的后面排。
- //原来的函数有4个参数
- var displayArgs = function (val1, val2, val3, val4) {
- console.log(val1 + " " + val2 + " " + val3 + " " + val4);
- }
- var emptyObject = {};
- // 生成新函数时bind方法指定了2个参数,则新函数会带着这个两个实参
- var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");
- // 调用时传入另2个参数,要在bind方法传入的2个实参后面
- displayArgs2("b", "c");
- // Output: 12 a b c
事件处理函数中使用 bind:
- var obj = {
- arg1 : 1,
- attach: function(){
- //var self = this; 普通传入this 的方法
- $('xxx').on('click',function (event) {
- console.log(this.arg1);//若不绑定this,回调函数中的this常指目标元素
- }.bind(this)); //使用bind方法绑定this
- }
- }
使用 bind() 方法改写 slice() 方法:
- var _Slice = Array.prototype.slice;
- var slice = Function.prototype.call.bind(_Slice);
- slice(…);
bind() 兼容 Ie5~ie8 处理
- if (!Function.prototype.bind) {
- Function.prototype.bind = function(context) {
- var self = this, // 调用bind方法的目标函数
- args = arguments;
- return function() {
- self.apply(context, Array.prototype.slice.call(args, 1));//参数个数不确定时用apply
- }
- }
- }
一般情况下 setTimeout() 的 this 指向 window 或 global 对象。当使用类的方法时需要 this 指向类实例,就可以使用 bind() 将 this 绑定到调用对象,而不用传入 self 方式传入 this。
this
this 对象是在函数运行时基于函数的执行环境绑定的:在全局函数中,this 等于 window,而当函数被当作某个对象的方法调用时,this 等于那个对象。
判断方法:this 和定义在哪儿无关,函数运行时,如果有. 运算符,this 指. 前的对象;如果没有, this 指 window。若 new 关键字调用时,指代新对象。有 apply/call/bind 时,指代第一个参数。
- /*例1*/
- function foo() {
- console.log( this.a );
- }
- var obj2 = {
- a: 42,
- foo: foo
- };
- var obj1 = {
- a: 2,
- obj2: obj2
- };
- obj1.obj2.foo(); // 42;当foo函数被调用时,其本身是归obj2所拥有
- /*例2*/
- function foo() {
- console.log( this.a );
- }
- var obj = {
- a: 2,
- foo: foo
- };
- var bar = obj.foo; // bar引用foo函数本身
- var a = "global"; // 全局对象的属性
- bar(); // "global" ;
在一个 html DOM 事件处理程序里面,this 始终指向这个处理程序被所绑定到的 DOM 节点。
来源: http://www.phperz.com/article/17/0523/327280.html