JS中call和apply函数用法实例分析


Posted in Javascript onJune 20, 2018

本文实例讲述了JS中call和apply函数用法。分享给大家供大家参考,具体如下:

call 函数

语法

obj.call(thisObj,arg[,arg2[,arg3[,...agr]]]);

简介

thisObj继承obj的属性和方法(obj原型链上的属性和方法不能被继承),后面的参数会当成obj的参数安装顺序传递进去。

示例

function animal(type,nickname){
    this.type = type;
    this.nickname = nickname;
    this.sayHello = function(){
      return 'hello';
    }
}
function cat(name,type,nickname){
    this.name = name;
    //cat继承animal
    animal.call(this,type,nickname);
}
console.log(new cat('wsscat','cut','tom'));
/*
cat {
 name: 'wsscat',
 type: 'cut',
 nickname: 'tom',
 sayHello: [Function] }
*/

apply 函数

语法

obj.apply(this[,argArray]);

简介

apply和call的作用差不多,都可以用来继承,区别在与apply只有两个参数,第二个参数必须是数组或者arguments对象。否则会报TypeError错误。如果继承的对象obj有多个参数,则会吧argArray的参数依次对应obj的每个参数。

示例

function animal(type,nickname){
    this.type = type;
    this.nickname = nickname;
    this.syaHello = function(){
      return 'hello';
    }
}
function cat(name,type,nickname){
    this.name = name;
    animal.apply(this,arguments);
}
console.log(new cat('wsscat','cut','tom'));
/*
cat {
 name: 'wsscat',
 type: 'wsscat',
 nickname: 'cut',
 syaHello: [Function] }
*/

总结

callapply功能是相同的

相同点在于都是用于对象的继承,第一个参数都是thisObj.

不同点在于call可以有多个参数,从第二个参数开始往后的参数会依次传给被继承的对象做参数。apply只有两个参数,第二个参数必须是数组类型或者arguments对象类型,而且他会把数组中的元素依次传递给被继承的对象做参数。

通过以上几点,我们可以得到如果被继承的对象只有一个参数的可以使用call,如果被继承的对象有多个参数的,建议使用apply.

补充

js中可以实现多继承,只需要调用多次call或apply即可。如:

function animal(type,nickname){
    this.type = type;
    this.nickname = nickname;
    this.syaHello = function(){
      return 'hello';
    }
}
function wscat(name,age){
    this.name = name;
    this.age = age;
    this.sayMe = function(){
      return 'my name:' + this.name + ', age:' + this.age;
    }
}
function cat(name,age,type,nickname){
    //第一种使用call
    animal.call(this,type,nickname);
    wscat.call(this,name,age);
    //第二种使用apply
    //animal.apply(this,[type,nickname]);
    //wscat.apply(this,[name,age]);
}
console.log(new cat('wscat',2,'cat','tom');
/*
cat {
 type: 'cat',
 nickname: 'tom',
 syaHello: [Function],
 name: 'wscat',
 age: 2,
 sayMe: [Function] }
*/

继承的优化

如果构造函数this绑定了太多的属性(比如一些共用的函数),示例化后就会照成浪费(因为this里的属性和方法实例化后会复制一份给新对象,多个对象之间的属性和方法互不干涉,对于一些可以共用的方法来就会造成浪费)

所以我们一般把共用的函数都放在原型链(prototype)上。但是使用call和apply无法继承原型链上的属性和方法。

因此我们可以使用混合的而写法,使用原型链和(applycall)组合的方式进行继承。

让子的原型链指向父的示例(父的实例化对象)。如:

cat.prototype = new animal();

让父的属性创建在子的this上。如:

animal.call(this[,arg]);
//animal.apply(this[,argArray]);

具体代码如下:

function animal(type,nickname){
    this.type = type;
    this.nickname = nickname;
}
animal.prototype.sayHello = function(){
    return 'hello';
}
function wscat(name,age){
    this.name = name;
    this.age = age;
} 
//这里是关键,原型链只能单继承,
//不能同时继承多个原型链,所以要一级一级来。
wscat.prototype = new animal();
wscat.prototype.sayMe = function(){
    return 'my name:' + this.name + ', age:' + this.age;
}
function cat(name,age,type,nickname){
    animal.call(this,type,nickname);
    wscat.call(this,name,age);
}
cat.prototype = new wscat();
var obj = new cat('wscat',10,'cat','tom');
console.log(obj);
//animal { type: 'cat', nickname: 'tom', name: 'wscat', age: 10 }
console.log(obj.sayHello());//hello
console.log(obj.sayMe());
/*
    my name:wscat, age:10
*/

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
axios post提交formdata的实例
Mar 16 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
vue 全局环境切换问题
Oct 27 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
微信小程序模拟cookie的实现
Jun 20 #Javascript
JS伪继承prototype实现方法示例
Jun 20 #Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 #Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 #Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 #Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 #Javascript
You might like
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
JavaScript事件列表解说
2006/12/22 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
python 读入多行数据的实例
2018/04/19 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
python迭代器常见用法实例分析
2019/11/22 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
django rest framework 过滤时间操作
2020/07/12 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
公司中秋节活动方案
2014/02/12 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
人民调解员培训方案
2014/06/05 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
水电工岗位职责
2015/02/14 职场文书
感恩主题班会教案
2015/08/12 职场文书