讨论一下Javascript中 Call的用法
call 方法(版本5.5以上) :
文档中描述:
调用一个对象的一个方法,以另一个对象替换当前对象。
Call([thisObj[,arg1[, arg2[, [,.argN]]]]])
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
测试特性:
1. Person类对象转换(我觉得是种实例化对象后, 继承的形式)
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Test Call</title>
- </head>
- <body>
- <script type="text/javascript">
- function Person(name){
- this.name = null;
- this.showName = function(){
- document.write(this.name);
- };
- this.Init = function(name){
- this.name = name;
- }
- this.Init(name);
- };
- var jeremy = new Person("Jeremy");
- jeremy.showName();
- document.write("<br>");
- var tom = new Object();
- Person.call(tom); //Person class do call()
- tom.name = "Tom";
- tom.showName();
- </script>
- </body>
输出:
2. 用call方法替换this指针
在这段代码中, NameShowing 类中,showName() 方法,需要有this.name 参数,
所以用call方法,传入实例jeremy.name, 用新对象jeremy替代this指针
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Test Call</title>
- </head>
- <body>
- <script type="text/javascript">
- function NameShowing(){
- this.showName = function(){
- document.write(this.name);
- }
- }
- function Person(name){
- this.name = null;
- this.Init = function(name){
- this.name = name;
- }
- this.Init(name);
- };
- var nameShowing = new NameShowing();
- var jeremy = new Person("Jeremy")
- //replace the 'this' pointer by jeremy object
- nameShowing.showName.call(jeremy);
- </script>
- </body>
- </html>
输出:
3. 用call(obj),实例obj继承方法
jeremy做为一个Person的实例, 缺少showName()方法, 从NameShowing类中使用call , jeremy继承了showName() 方法
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Test Call</title>
- </head>
- <body>
- <script type="text/javascript">
- function NameShowing(){
- this.showName = function(){
- document.write(this.name);
- }
- }
- function Person(name){
- this.name = null;
- this.Init = function(name){
- this.name = name;
- }
- this.Init(name);
- };
- var jeremy = new Person("Jeremy")
- //pass showName() method to jeremy object
- NameShowing.call(jeremy);
- jeremy.showName();
- </script>
- </body>
- </html>
- <strong>
- </strong>
输出:
4 call实现带有构造函数的参数 传入
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Test Call</title>
- </head>
- <body>
- <script type="text/javascript">
- function Person(name, age){
- this.name = null;
- this.age = null;
- this.showPersonInfo = function(){
- document.write("Name: " + this.name + "<br>");
- document.write("Age: " + this.age + "<br>");
- };
- this.Init = function(){
- this.name = name;
- this.age = age;
- };
- this.Init();
- }
- var jeremy = new Object();
- Person.call(jeremy, "Jeremy", 20);
- jeremy.showPersonInfo();
- </script>
- </body>
- </html>
输出:
call函数原理分析:
从上面call方法使用中,发生了原先的this指针被新的对象替代的方法,而原先的参数也就赋给了新的对象
从网上资料看到,
直接说就是,使用apply实现了 新对象对this指针的替代
例如下面代码使用到了apply 方法:
- function A(a){
- document.write(a);
- };
- function AA(a){
- A.apply(this, arguments);
- }
- AA("output in AA");
输出是:
source:http://blog.csdn.net/anialy/article/details/8299181