JavaScript中神奇的call()方法


Posted in Javascript onMarch 12, 2015

先看看关于call()的官方解释,“调用一个对象的一个方法,以另一个对象替换当前对象。”,看了这样的解释,或许让你更摸不着头脑了。看例子:

var x = "我是全局变量";
//定义全局变量x

function a(){



 //定义函数类结构a


    this.x = "我是在函数类结构a中声明的哦";    

}

//定义普通函数,弹出当前指针所包含的变量x的值

function f(){       

    alert (this.x);

}

//返回值为“我是在函数类结构a中声明的哦”

f.call(new a());

我的理解是,f.call(new a())就是把函数(其实也是对象)f复制到被调用对象“new a()”下面去解析,事实上和下面这段代码的解析结果一样:
function a(){
this.x = "我是在函数类结构a中声明的哦";

alert(this.x);    

}

a();

只不过此时变量X的作用域不同而已,咿…看起来好像有点继承的味道哦,难道不是吗?在上例中,f完全被构造函数a的实力对象继承了,如果说这还不足以说明a.call(b)是一种继承模式,那么再看一个更具有继承味道的用法吧。
function f(){    

    this.a ="a";    

    this.b = function(){    

        alert("b");

    }

}

function e(){    

    f.call(this);     

}

var c = new e();

alert(c.a);  //弹出a

c.b();    //弹出b

在这个例子中,只要会使用浏览器的朋友,都能看得出来e完全继承了f的属性和方法,否则是无法解释的,因为在e中并没有定义属性a和b,那么按常理推断在e的实例对象c中,并不会出现这两个属性。
Javascript 相关文章推荐
JavaScript实现表格排序方法
Jun 14 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
js+html实现点名系统功能
Nov 05 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
js里面的变量范围分享
Jul 18 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 #Javascript
JavaScript中定义函数的三种方法
Mar 12 #Javascript
javascript实时显示北京时间的方法
Mar 12 #Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 #Javascript
JavaScript数据结构与算法之栈详解
Mar 12 #Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 #Javascript
Javascript数据结构与算法之列表详解
Mar 12 #Javascript
You might like
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php实现计数器方法小结
2015/01/05 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
js 可拖动列表实现代码
2011/12/13 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
简单实现js浮动框
2016/12/13 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python Requests 基础入门
2016/04/07 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
党性锻炼的心得体会
2014/09/03 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
五一劳动节活动总结
2015/02/09 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript