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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
js调试工具Console命令详解
Oct 21 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
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
跟我学Laravel之配置Laravel
2014/10/15 PHP
php rsa加密解密使用详解
2015/01/14 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
Python random模块用法解析及简单示例
2017/12/18 Python
Python高级用法总结
2018/05/26 Python
python里dict变成list实例方法
2019/06/26 Python
解决Python3下map函数的显示问题
2019/12/04 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
护士求职信范文
2014/05/24 职场文书
相亲活动方案
2014/08/26 职场文书
企业法人代表证明书
2015/06/18 职场文书
python pygame入门教程
2021/06/01 Python
Python常遇到的错误和异常
2021/11/02 Python