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. .NET Framework 4 和 .NET Framework 4 Client Profile

    提出这个问题的背景:在新项目中封装了一个DAL来通过EF框架对数据库操作,但是在项目引用后,每当编译时就会出错!更加诡异的是在Web项目和WCF项目中对此DAL引用时就不会出现此问题.作为一个初学者, ...

  2. jQuery的dom操作(二)转

    addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr ...

  3. php 使用 Memcache 例子

    代码写成后不断的往数据库插入数据,可以发现 当set时:理论上速度变慢,但数据同步 当get时:理论上速度变快,但数据不同步,需要缓存失效后重新请求set方法 <?php $mem = new ...

  4. thinkphp 模板调用数据

    我自己写了个简单的模板是这样的 <!DOCTYPE html> <html> <head> <style> div { width:230px; hei ...

  5. SQLdiag-配置文件-扩展

    CustomDiagnostics在我们第一次双击D:\Program Files\Microsoft SQL Server\100\Tools\Binn目录下的SQLdiag.exe应用程序所收集的 ...

  6. MongoDB Map Reduce

    介绍 Map-Reduce是一种计算模型,简单的说就是将大批量的工作分解(MAP)执行,然后再将结果合并成最终结果(REDUCE). MongoDB提供的Map-Reduce非常灵活,对于大规模数据分 ...

  7. swift 异步加载图片

    import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: ...

  8. pptp记录用户登陆日志

    pptp vpn记录用户登录和流量信息(转) 这个问题困扰了我很久,终于在pppd的man文档里,发现了踪迹.在man中的SCRIPTS下有一系列的参数,其中PEERNAME就是登陆的用户名,并且在/ ...

  9. Http错误 404.3-Not Found....或者500.19 Internal Server Error

    解决方法:以管理员身份打开VS2010x64位兼容命令提示:aspnet_regiis -i

  10. Autowired注解的妙用---在Controller里的构造函数里获取需要注入的对象

    /*@Resource private Observer<TaxiObserverVo> taxiPushObserver; @Resource private Observer<T ...