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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
js实现百度搜索提示框
Feb 05 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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
一个odbc连mssql分页的类
2006/10/09 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
php实现小程序支付完整版
2018/10/09 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
JavaScript数组的5种迭代方法
2017/09/29 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
vue实现购物车小案例
2019/09/27 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
使用Python的PIL模块来进行图片对比
2016/02/18 Python
python机器学习之KNN分类算法
2018/08/29 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
小学优秀班干部事迹材料
2014/05/25 职场文书
办公室卫生管理制度
2015/08/04 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers