JavaScript中神奇的call()方法

 这篇文章主要介绍了JavaScript中神奇的call()方法,本文用浅显的语言帮助你加深理解call()方法,需要的朋友可以参考下

 
 

先看看关于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中,并不会出现这两个属性。

时间: 2024-11-06 11:43:24

JavaScript中神奇的call()方法的相关文章

深入理解关于javascript中apply()和call()方法的区别_javascript技巧

如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的"偏见",因为这对您来说绝对是一片新大陆,让JavaScrip慢慢融化以前一套凝固的编程意识,注入新的生机! 好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply, call两个方法的运用上.

Javascript中神奇的this_javascript技巧

Javascript 当中的 this 与其他语言是完全不同的机制,很有可能会让一些编写其他语言的工程师迷惑. 1. 误以为 this 指向函数自身 根据 this 的英语语法,很容易将函数中出现的 this 理解为函数自身.在 javascript 当中函数作为一等公民,确实可以在调用的时候将属性值存储起来.但是如果使用方法不对,就会发生与实际预期不一致的情况.具体情况,请看下面代码 function fn(num){ this.count++; } fn.count = 0; for(var

简述JavaScript中正则表达式的使用方法

  这篇文章主要介绍了JavaScript中正则表达式的使用方法,正则表达式是JS进阶学习中的重要知识,本文简述了JS对正则表达式的支持情况,需要的朋友可以参考下 正则表达式是一个对象,它描述了字符模式. JavaScript的RegExp类表示正则表达式和字符串和正则表达式定义,使用正则表达式来进行强大的模式匹配和搜索和替换文本功能的方法. 语法: 正则表达式可以用RegExp( ) 构造这样的定义: ? 1 2 3 4 5 var pattern = new RegExp(pattern,

javascript中数组的concat()方法的具体使用

 数组的concat()方法想必大家比不陌生吧,在本文为大家介绍下javascript中数组的concat()方法的具体使用,感兴趣的朋友可以参考下 代码如下: <html>  <head>  <title>数组的concat()方法</title>    <script>  /*  数组的concat()方法:  1.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.  2.返回一个新的数组.该数组是通过把所有 arrayX 参数添加

JavaScript中扩展Array contains方法实例

 这篇文章主要介绍了JavaScript中扩展Array contains方法实例,本文直接给出实现代码,需要的朋友可以参考下     javascript的Array没有contains方法,有时候这会不方便,contains方法实现很简单: 代码如下: function contains(a, obj) { var i = a.length; while (i--) { if (a[i] === obj) { return true; } } return false; } 当然我们也可以扩

javascript中定义类的方法详解

 这篇文章主要详细介绍了javascript中定义类的方法的相关资料,需要的朋友可以参考下     JS中定义类的方式有很多种: 1.工厂方式   代码如下: function Car(){ var ocar = new Object; ocar.color = "blue"; ocar.doors = 4; ocar.showColor = function(){ document.write(this.color) }; return ocar; } var car1 = Car(

JavaScript中setter和getter方法介绍_javascript技巧

javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

javascript-关于JavaScript中的window.open方法

问题描述 关于JavaScript中的window.open方法 今天下了Myeclipse,打算试试做jsp和Html 然后写了如下测试代码; <!DOCTYPE html> WindowsDemo.html <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this

JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)_javascript技巧

js中输出信息的方法内容如下所示: 1.文档流输出 document.write('hello'); 2.输出信息提示框 模态对话框 window.alert('要输出显示的内容'); 或 alert('要输出显示的内容'); alert(n); 3.信息确认框 var f = window.confirm('是否要进入新浪网'); confirm(""); if(f){ location.href = 'http://www.sina.com.cn'; } 4.提示输入框 windo