JavaScript 函数调用

JavaScript 函数有 4 种调用方式。

每种方式的不同方式在于 this 的初始化。

this 关键字

一般而言,在Javascript中,this指向函数执行时的当前对象。

 

注意 this 是保留关键字,你不能修改 this 的值。

全局对象

当函数没有被自身的对象调用时, this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口(window 对象)。

该实例返回 this 的值是 window 对象:

1作为一个函数调用

实例

function myFunction(a, b) {
    return a * b;
}
myFunction(10,
2);           //
myFunction(10, 2) 返回 20

2函数作为方法调用

实例

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return
this.firstName + " " + this.lastName;
    }
}
myObject.fullName();        
// 返回 "John Doe"

注意

函数作为对象方法调用,会使得 this 的值成为对象本身。

3使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

实例

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new
myFunction("John","Doe");
x.firstName;                            
// 返回 "John"

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

 

构造函数中 this 关键字没有任何的值。
this 的值在函数调用时实例化对象(new object)时创建。

4作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

实例

Function  myObject(){}

function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 10, 2);//返回20

function myFunction(a, b) { return a * b; }

myArray = [10,3];

myFunction.apply(myObject, myArray);//返回30

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。

闭包深入:http://www.cnblogs.com/onepixel/p/5062456.html

1 原型法设计模式

在.Net中可以使用clone()来实现原型法

原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。

2 javascript的方法可以分为三类:

a 类方法

b 对象方法

c 原型方法

例子:

function People(name)
{
this.name=name;
//对象方法
this.Introduce=function(){
alert("My name is "+this.name);
}
}
//类方法
People.Run=function(){
alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
alert("我的名字是"+this.name);
} //测试 var p1=new People("Windking"); p1.Introduce(); People.Run(); p1.IntroduceChinese();

  

prototype是什么含义?

javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。

A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。

先看一个实验的例子:

function baseClass()
{
this.showMsg = function()
{
alert("baseClass::showMsg");
}
} function extendClass()
{
} extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg

  

我们首先定义了baseClass类,然后我们要定义extentClass,但是我们打算以baseClass的一个实例为原型,来克隆的extendClass也同时包含showMsg这个对象方法。

extendClass.prototype = new baseClass()就可以阅读为:extendClass是以baseClass的一个实例为原型克隆创建的。

那么就会有一个问题,如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?

下面是扩展实验2:

function baseClass()
{
this.showMsg = function()
{
alert("baseClass::showMsg");
}
} function extendClass()
{
this.showMsg =function ()
{
alert("extendClass::showMsg");
}
} extendClass.prototype = new baseClass();
var instance = new extendClass(); instance.showMsg();//显示extendClass::showMsg

 

实验证明:函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。

那么又会有一个新的问题:

如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?

3 obj1.func.call(obj)方法

意思是将obj看成obj1,调用func方法

答案是可以使用call:

extendClass.prototype = new baseClass();
var instance = new extendClass(); var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg

  

这里的baseinstance.showMsg.call(instance);阅读为“将instance当做baseinstance来调用,调用它的对象方法showMsg”

好了,这里可能有人会问,为什么不用baseClass.showMsg.call(instance);

这就是对象方法和类方法的区别,我们想调用的是baseClass的对象方法

最后,下面这个代码如果理解清晰,那么这篇文章说的就已经理解了:

<script type="text/javascript">

function baseClass()
{
this.showMsg = function()
{
alert("baseClass::showMsg");
} this.baseShowMsg = function()
{
alert("baseClass::baseShowMsg");
}
}
baseClass.showMsg = function()
{
alert("baseClass::showMsg static");
} function extendClass()
{
this.showMsg =function ()
{
alert("extendClass::showMsg");
}
}
extendClass.showMsg = function()
{
alert("extendClass::showMsg static")
} extendClass.prototype = new baseClass();
var instance = new extendClass(); instance.showMsg(); //显示extendClass::showMsg
instance.baseShowMsg(); //显示baseClass::baseShowMsg
instance.showMsg(); //显示extendClass::showMsg baseClass.showMsg.call(instance);//显示baseClass::showMsg static var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg </script>

  

转载于 http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html 

javascript中的this与prototype,原型理解的更多相关文章

  1. prototype原型理解

    一切都是对象,对象是若干属性的集合   数组是对象.函数是对象.对象还是对象.对象里面的一切都是属性,只有属性,没有方法.方法也是属性. 一切引用类型都是属性 怎么判断一个值是否是对象? 值类型的类型 ...

  2. JavaScript中call,apply和prototype

    [TOC] call()方法 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 如果没有提供 thi ...

  3. Javascript中的继承与Prototype

    之前学习js仅仅是把w3school上的基本语法看了一次而已,再后来细看书的时候,书中会出现很多很多没有听过的语法,其中一个就是js的继承以及总能看到的prototype.我主要在看的两本js书是&l ...

  4. 关于Javascript中通过实例对象修改原型对象属性值的问题

    Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...

  5. 【转】JavaScript中的constructor与prototype

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  6. Javascript中的__proto__、prototype、constructor

    今天重温了下Javacript,给大家带来一篇Javascript博文,相信对于Javacript有一定了解的人都听过prototype原型这个概念,今天我们深度的分析下prototype与__pro ...

  7. javascript学习:闭包和prototype原型使用基础

    闭包 function Person(name) { this.Username = name; var Userage = 18; //通过这种方法可以模拟私有成员 //类似于private成员 t ...

  8. JavaScript中对null和undefined的理解

    前沿: 今天工作中遇到了监视一个变量是undefined,结果判断写的是==null 返回值是true,这个结果引起了我对这两个东西的兴趣. 查询了相关的文章理解并测试了.发现有以下特点: 1.广义上 ...

  9. JSON 在JavaScript 中的应用及自己的理解

    [对象和json]JSON:JavaScript 对象表示法(JavaScript Object Notation).JSON 是存储和交换文本信息的语法.类似 XML.JSON是一种数据格式,不是一 ...

随机推荐

  1. ASP.NET MVC 中将数据从View传递到控制器中的表单提交法

    本方法以搜索功能为例,在view中输入要搜索的关键字,提交到相应controller中进行处理. view中代码: <div class="searchBox"> @u ...

  2. js跳转方法

    很有用的东西,参考自http://www.zhuoda.org/lunzi/66097.html 第一种 <script language="javascript" type ...

  3. 一些Perl例程(全部手打并执行过)

    #-1-变量使用,打印#!/usr/local/bin/perl$value=100+30+3+8;print("Value=",$value,"\n"); # ...

  4. javascript设计模式学习之六——代理模式

    一.代理模式定义 代理模式的关键是:当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问.代理模式需要和本体对外提供相同的接口,对用户来说是透明的.代理模式的种类有 ...

  5. iOS 自定义UITabBarController的tabBar

               #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDeleg ...

  6. MagicNotes:自我管理中的破窗效应

    MagicNotes,思绪随风飞扬,偶尔在这里停留. 在<程序员修炼之道——从小工到专家>这本书里,有这么一段描述: 在市区,有些建筑漂亮而整洁,而另一些却是破败不堪的“废弃船只”.为什么 ...

  7. ARC 没有自动释放内存

    http://www.cnblogs.com/qingche/p/4569833.html 定位了好几天,才发现是打印日志没有即时释放内存,使用intrustment

  8. XP下安装MAC OS虚拟系统

    参考baidu经验: http://jingyan.baidu.com/article/e5c39bf5876c8b39d760331a.html 工具: 1.虚拟机软件:vmware worksta ...

  9. expect实现交互式脚本

    #!/usr/bin/expect -f ##告诉解释器用expect来解释 set timeout 6 ##设置超时时间 ] ## 这个是传递给脚本的第一个参数,并把参数赋值给user ] ## 这 ...

  10. Lintcode: Sort Letters by Case

    Given a string which contains only letters. Sort it by lower case first and upper case second. Note ...