javascript 设计模式 学习笔记(二)--基础(call,apply)
2016-08-23 18:16
746 查看
1.call和apply的区别
他们的作用一模一样,区别在于传入参数的形式不同
apply 接受两个参数,第一个参数指定了函数体内的this对象的指向,第二个参数为一个带下标的集合,可以为数组,也可以为类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数
call传入的参数是不固定的,跟apply相同的是,第一个参数也是代表函数体内的this的指向,从第二个参数开始往后,没个参数被依次传入函数
在使用call或者apply的时候,如果第一个参数为null,函数体内的this会指向默认的宿主对象,在浏览器中则为window.
2.call和apply的用途
改变this指向
使用call来修正this的场景
Function.prototype.bind
大部分高级浏览器都实现了内置Function.prototype.bind,用来指定函数内部的this指向,即使没有原生的Function.prototype.bind实现,也能模拟一个,如下:
传参数的bind函数实现
借用其它对象的方法
第一种借用场景:借用构造函数,通过此种方法,可以实现一些类似继承的效果
借用的第二种场景:函数的参数列表是一个类数组对象,虽然也有下标,但并非真正的数组,所以不能像数组一样进行排序,插入,这是我们会借用Array.prototype对象上的方法,比如向arguments中添加一个新元素。
他们的作用一模一样,区别在于传入参数的形式不同
apply 接受两个参数,第一个参数指定了函数体内的this对象的指向,第二个参数为一个带下标的集合,可以为数组,也可以为类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数
var func=function(a,b,c){ alert([a,b,c]); }; func.apply(null,[1,2,3]);//输出[1,2,3]
call传入的参数是不固定的,跟apply相同的是,第一个参数也是代表函数体内的this的指向,从第二个参数开始往后,没个参数被依次传入函数
var func=function(a,b,c){ alert([a,b,c]); }; console.log(null,1,2,3);//输出[1,2,3]
在使用call或者apply的时候,如果第一个参数为null,函数体内的this会指向默认的宿主对象,在浏览器中则为window.
2.call和apply的用途
改变this指向
var obj1={name:''seven}; var obj2={name:'anne'}; window.name='window'; var getNmae=function(){ alert(this.name); }; getName();//输出:window getName.call(obj1);//输出:seven getName.call(obj2);//输出:anne
使用call来修正this的场景
document.getElementById=(function(func){ return function(){ return func.apply(document,arguments); } })(document.getElementById); var getId=document.getElementById; var div=getId('div1'); alert(div.id);//输出div1
Function.prototype.bind
大部分高级浏览器都实现了内置Function.prototype.bind,用来指定函数内部的this指向,即使没有原生的Function.prototype.bind实现,也能模拟一个,如下:
Function.prototype.bind=function(context){ var self=this; return function(){ return self.apply(context,arguments);//执行新函数时,会把之前传入的context当作新函数体的this } }; var obj={neme:'seven'}; var func=function(){ alert(this.name); }.bind(obj); func();//输出:seven
传参数的bind函数实现
Function.prototype.bind=functiom(){ var self=this, context=[].shift.call(arguments), args=[].slice.call(arguments); return function(){ return self.apply(context,[].concat.call(args,[],slice.call(arguments))); //执行新函数时,会把之前传入的context当作新函数体的this //并且组合两次分别传入的参数,作为新函数的参数 } }; var obj={name:'seven'}; var func=function(a,b,c,d){ alert(this.name); alert([a,b,c,d]); }.bind(obj,1,2); func(3,4);//输出:seven [1,2,3,4]
借用其它对象的方法
第一种借用场景:借用构造函数,通过此种方法,可以实现一些类似继承的效果
var A=function(name){ this.name=name; }; var B=function(){ A.apply(this,arguments); }; B.prototype.getName=function(){ return this.name; }; var b=new B('seven'); console.log(b.getName());//输出:seven
借用的第二种场景:函数的参数列表是一个类数组对象,虽然也有下标,但并非真正的数组,所以不能像数组一样进行排序,插入,这是我们会借用Array.prototype对象上的方法,比如向arguments中添加一个新元素。
(function(){ Array.prototype.push.call(arguments,3); console.log(arguments);//输出:1,2,3] })(1,2;)
相关文章推荐
- 【学习笔记javascript设计模式与开发实践(this、call和apply)----2】
- 【学习笔记javascript设计模式与开发实践(this、call和apply)----2】
- javascript 设计模式 学习笔记(一)--基础(this)
- javascript 设计模式 学习笔记(三)--基础(闭包)
- JavaScript学习记录——《学用 JavaScript 设计模式》学习笔记(1)
- 设计模式学习笔记二:面向对象基础二
- Javascript 设计模式学习笔记(2) - 继承(Inheritance) (上)
- 设计模式学习笔记7——设计模式基础6--监视器
- Javascript 设计模式学习笔记(2) - 继承(Inheritance) (下)
- JavaScript 学习笔记九 new和apply,call
- Javascript 设计模式学习笔记(1) - 封装
- 设计模式学习笔记3——设计模式基础2--抽象类
- 设计模式学习笔记二:面向对象基础四之抽象类和接口
- 黑马程序员_基础_IO流学习笔记_文本文件读取及复制、字符流的缓冲区和装饰设计模式
- Javascript中call与apply的学习笔记
- 黑马程序员 JAVA学习笔记——java基础 单例设计模式
- 设计模式学习笔记6——设计模式基础5--不变对象
- 设计模式学习笔记5——设计模式基础4--常量数据管理器
- JavaScript 学习笔记(九)call和apply方法
- javascript 设计模式之单体模式 面向对象学习基础