huweiyi
- 浏览: 87856 次
- 性别:
- 来自: 重庆
-
文章分类
[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 371由于最近在一个小项目需要把页面和后台分开， ... -
js操作数据
2015-09-25 14:40 519处理数组的方法很多，javascript splice()算是 ... -
js中(function(){})()说明
2015-09-25 11:59 381js中自执行匿名函数 格式：(function() {//co ... -
js的Prototype属性 解释及常用方法
2015-09-25 11:44 437函数：原型每一个构造函数都有一个属性叫做原型(prototy ... -
js精品
2015-03-20 13:04 01. oncontextmenu="window.e ... -
js全套函数
2014-09-17 11:54 4371.document.write(""); ... -
javascript中正则表达式
2014-08-08 10:52 473正则表达式语法： 正则表达式重复： 选择、分组 ... -
javascript中prototype
2014-07-23 10:42 464用过JavaScript的同学们肯定都对prototype如雷 ... -
javascript中data用法
2014-01-13 11:24 610var d = new Date();//Date对象需要创建 ... -
js完成跑马灯程序
2014-02-08 16:56 671<!Doctype html> <html& ... -
两个下拉列表的移动(只完成左到右，右到左原理相同)
2014-02-08 16:56 528<!DOCTYPE html PUBLIC " ... -
动态添加表格和删除表格(复制粘贴就可以运行)
2014-02-08 16:57 650<!DOCTYPE html PUBLIC " ... -
动态添加select选项
2013-12-26 15:58 541<!DOCTYPE html PUBLIC " ... -
js判断两个日期的大小和判断输入框的值是否为空
2013-12-26 15:40 995/*******************js判断日期的大小** ... -
js中setInterval与setTimeout用法
2013-12-23 13:42 418setTimeout 定义和用 ... -
正则表达式
2013-09-16 11:36 506匹配中文字符的正则表达式： [u4e00-u9fa5] 评注 ... -
showModalDialog
2013-07-12 11:29 381JS中showModalDialog 详细使用 基本介绍： ... -
javascipt 总结
2013-07-10 21:36 482typeof（）： 是判断数据的类型，例如：alert（typ ...
相关推荐
JavaScript中call与apply方法
在JavaScript中，`call`和`apply`是两个非常重要的方法，它们都用于改变函数调用时的上下文（即`this`的值），并且可以灵活地传递参数。本篇文章将深入探讨这两个方法的用法、区别以及实际应用场景。 `call`方法...
在JavaScript中，`call`和`apply`是两种非常重要的函数调用方式，它们都用于改变函数内部`this`的指向，实现函数的动态绑定。这两个方法都是Function对象的原型方法，可以应用到任何函数上。 首先，让我们深入理解`...
本文实例分析了JavaScript中call和apply方法的区别。分享给大家供大家参考，具体如下： 这两个方法不经常用，但是在某些特殊场合中是非常有用的，下面主要说下它们的区别： 1、首先，JavaScript是一门面向对象的语言...
在JavaScript中，call() 和 apply() 是两个非常重要的方法，它们都属于 Function 对象的方法，用于改变函数体内this的指向，并且可以间接调用函数。虽然它们的基本作用类似，但是它们在参数传递方式上存在明显的区别...
### JavaScript中call与apply方法的学习笔记 在JavaScript编程中，`call`和`apply`是两个非常重要的方法，它们都是`Function`原型上的方法，用于改变函数的`this`上下文（即函数体内`this`的指向）到指定的对象，并...
本文将详细解释JavaScript中call(), apply(), 和 bind() 方法的作用、语法以及使用场景，并且会探讨回调函数的使用，帮助理解这些概念在实际编程中的应用。 首先，我们来探讨call() 和 apply() 方法。这两个方法都...
本文实例讲述了javascript中call,apply,bind函数用法。分享给大家供大家参考，具体如下： 一.call函数 a.call(b); 简单的理解：把a对象的方法应用到b对象上(a里如果有this，会指向b) call()的用法：用在函数上面 ...
以实例切入，讲解JavaScript中call,apply,bind方法，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> [removed] ...
主要介绍了javascript中call,apply,callee,caller用法,结合实例形式分析了javascript中call,apply,callee,caller功能、使用方法及相关操作注意事项,需要的朋友可以参考下
JavaScript中的`call`和`apply`是两种非常重要的函数调用方式，它们的主要作用是改变函数执行时的上下文（即`this`的指向），从而解决特定的问题并提供灵活的编程模式。理解这两个方法对于深入JavaScript编程至关...
1、call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用...
本话题聚焦于"callJavaScript"，即如何在C++程序中调用JavaScript代码。这个标题暗示了我们将探讨一种技术，使C++能够利用JavaScript的灵活性和动态性，而无需离开C++的高效执行环境。 首先，C++调用JavaScript的一...
3.1：找出数组中的最大数 3.2：将数组的空元素变为undefined 3.3：转换类似数组的对象 4.Function.prototype.bind() 5.绑定回调函数的对象 6.call，apply，bind方法的联系和区别 1.call/apply/bind方法的来源 ...
在JavaScript中，call、apply和bind是Function对象自带的三个方法，本文将通过几个场景的应用，来详细理解三个方法。 call() call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。 ...
总的来说，JavaScript中的`call`和`apply`方法是非常有用的工具。它们可以用来控制函数调用的上下文，这在函数式编程和面向对象编程中都非常重要。同时，它们也为我们实现代码的复用和扩展提供了一种方式，尤其是在...
在JavaScript中，`call()` 和 `apply()` 是两种非常重要的函数调用方式，它们都用于改变函数内部 `this` 的指向。尽管它们的作用相似，但使用方式略有不同。 `call()` 方法允许你调用一个函数，并指定这个函数的 `...