huweiyi
- 浏览: 81321 次
- 性别:
- 来自: 重庆
-
文章分类
[b]Person类对象转换（我觉得是种实例化对象后， 继承的形式）[/b]
[html] view plaincopy
<!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指针
[html] view plaincopy
<!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（） 方法
[html] view plaincopy
<!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实现带有构造函数的参数 传入
[html] view plaincopy
<!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 方法：
[javascript] view plaincopy
function A(a){
document.write(a);
};
function AA(a){
A.apply(this, arguments);
}
AA("output in AA");
输出是：
[html] view plaincopy
<!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指针
[html] view plaincopy
<!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（） 方法
[html] view plaincopy
<!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实现带有构造函数的参数 传入
[html] view plaincopy
<!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 方法：
[javascript] view plaincopy
function A(a){
document.write(a);
};
function AA(a){
A.apply(this, arguments);
}
AA("output in AA");
输出是：
分享到：
发表评论
-
ajax跨域
2016-05-03 13:53 330由于最近在一个小项目需要把页面和后台分开， ... -
js操作数据
2015-09-25 14:40 483处理数组的方法很多，javascript splice()算是 ... -
js中(function(){})()说明
2015-09-25 11:59 346js中自执行匿名函数 格式：(function() {//co ... -
js的Prototype属性 解释及常用方法
2015-09-25 11:44 409函数：原型每一个构造函数都有一个属性叫做原型(prototy ... -
js精品
2015-03-20 13:04 01. oncontextmenu="window.e ... -
js全套函数
2014-09-17 11:54 4061.document.write(""); ... -
javascript中正则表达式
2014-08-08 10:52 441正则表达式语法： 正则表达式重复： 选择、分组 ... -
javascript中prototype
2014-07-23 10:42 443用过JavaScript的同学们肯定都对prototype如雷 ... -
javascript中data用法
2014-01-13 11:24 572var d = new Date();//Date对象需要创建 ... -
js完成跑马灯程序
2014-02-08 16:56 642<!Doctype html> <html& ... -
两个下拉列表的移动(只完成左到右，右到左原理相同)
2014-02-08 16:56 480<!DOCTYPE html PUBLIC " ... -
动态添加表格和删除表格(复制粘贴就可以运行)
2014-02-08 16:57 623<!DOCTYPE html PUBLIC " ... -
动态添加select选项
2013-12-26 15:58 511<!DOCTYPE html PUBLIC " ... -
js判断两个日期的大小和判断输入框的值是否为空
2013-12-26 15:40 926/*******************js判断日期的大小** ... -
js中setInterval与setTimeout用法
2013-12-23 13:42 390setTimeout 定义和用 ... -
正则表达式
2013-09-16 11:36 462匹配中文字符的正则表达式： [u4e00-u9fa5] 评注 ... -
showModalDialog
2013-07-12 11:29 350JS中showModalDialog 详细使用 基本介绍： ... -
javascipt 总结
2013-07-10 21:36 446typeof（）： 是判断数据的类型，例如：alert（typ ...
相关推荐
JavaScript中call与apply方法
NULL 博文链接：https://ufoqhmdt.iteye.com/blog/1676748
本文实例分析了JavaScript中call和apply方法的区别。分享给大家供大家参考，具体如下： 这两个方法不经常用，但是在某些特殊场合中是非常有用的，下面主要说下它们的区别： 1、首先，JavaScript是一门面向对象的语言...
我们可以将call和apply看做是某个对象的方法，通过调用方法的形式来间接调用函数
本文实例讲述了javascript中call,apply,bind函数用法。分享给大家供大家参考，具体如下： 一.call函数 a.call(b); 简单的理解：把a对象的方法应用到b对象上(a里如果有this，会指向b) call()的用法：用在函数上面 ...
本文实例讲述了javascript中call,apply,callee,caller用法。分享给大家供大家参考，具体如下： 实践一：call,apply 用来让一个对象去调用本不属于自己的方法，两者都可以传递参数，call的参数是列表形式，apply的...
以实例切入，讲解JavaScript中call,apply,bind方法，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> [removed] ...
主要介绍了javascript中call()、apply()的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文主要Javascript中call，apply，bind方法的进行全面分析，并在文章结尾对call，apply，bind方法的联系和区别做了总结，具有很好的参考价值，需要的朋友一起来看下吧
主要介绍了javascript中call和apply的用法示例分析，非常的详细,需要的朋友可以参考下
主要介绍了Javascript中call的两种用法实例，有需要的朋友可以参考一下
主要给大家对比分析了javascript中call,apply,bind三个函数的用法，非常的详细，这里推荐给小伙伴们。
主要介绍了Javascript中call和apply函数的比较和使用实例,本文试图用更加清晰简单的思路来分析解释这两个函数,需要的朋友可以参考下
主要介绍了在JavaScript中call()与apply()区别 的相关资料,需要的朋友可以参考下
下面小编就为大家带来一篇有关JavaScript中call()和apply() 的一些理解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
1、call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用...