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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
js实现图片放大展示效果
Aug 30 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
微信小程序模拟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
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python利用正则表达式提取字符串
2016/12/08 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python with (as)语句实例详解
2020/02/04 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
施工员岗位职责
2014/03/16 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
员工自我工作评价
2015/03/06 职场文书
企业年会祝酒词
2015/08/11 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python