一、JavaScript对象的创建

(1)对象方法

        function Student(name){
this.name=name;
this.showName=function(){
alert("my name is "+this.name); };
}

调用showName方法:

new Student('a').showName();

对象方法的调用,类要生成一个实例,该实例可以调用该方法;

(2)类方法

        Student.showAge=function(){
alert('age is 20');
}

调用方式:

Student.showAge();

类方法相当于C#的静态方法,不需要new一个对象实例,可以直接调用;

(3)继承方法

        Student.prototype.sayHello=function Hello(){
alert('hello');
}

调用方法:

new Student('a').sayHello();

原型方法一般用与继承父类的方法和方法共享;

(4)对象的字面量方式创建

        var p2={
age:21,
name:'jack',
sayAge:function(){
alert(this.age);
}
}

调用方法

p2.sayAge();

二、prototype的用法

(1)创建一个基类对象

        function baseClass(){
this.name='jack';
this.showMsg=function(){
alert('base');
};
}

(2)创建一个新的对象

function extendClass(){
this.age=20;
}

(3)新对象引用原型对象

extendClass.prototype=new baseClass();

(4)查看新对象

在此,我们可以看到extendClass继承了baseClass的属性和方法,在extendClass对象中可以调用baseClass的对象和方法;

三、调用原型对象中的方法;

如果当原型对象和本对象均有同名的方法和属性时,调用时会先调用本对象的方法和属性;

(1)原型对象

        function baseClass(){
this.name='jack';
this.showMsg=function(){
alert('base');
};
}

(2)新对象

        function extendClass(){
this.age=20;
this.name='rose';
this.showMsg=function(){
alert('extend');
}
}

(3)新对象继承原型对象

extendClass.prototype=new baseClass();

(4)调用对象的方法

通过结果我们可以看到,当新对象和原型对象都有同一个属性和方法时,会调用本对象的方法和属性,那么我们该如何调用原型对象的方法和属性呢

4.1  使用__proto__来调用

4.2 使用call来调用

new baseClass().showMsg.call(new extendClass())

将extendClass对象当做bassClass对象,来调用baseClass的对象方法

(5)call和apply的使用和区别

5.1 call和apply主要是用来改变函数运行时的上下文,他俩功能一致;但在参数传递时:call传递参数个数任意,apply传递参数是数组形式;

5.2 call和apply的运用

基础方法

        function Dog(name){
this.name='dog';
this.showName=function(){
alert("name1:"+this.name);
}
}

新的对象

        function Fish(){
this.name='fish';
}

当Fish对象想要调用showName方法时,可用使用apply,或者call

              var dog=new Dog();
var fish=new Fish();
dog.showName.call(fish)
dog.showName.apply(fish,[])

四、小结

1、JavaScript是基于原型的语言,只有对象。
2、原型对象作为模板,新对象从中获得原始属性;任何对象都可以作为另一个对象的原型,从而允许后者共享前者的属性;
3、当向构造器函数的原型对象中添加新的属性,该属性将添加到从这个原型中继承属性的所有对象中。

五、参考链接

1、http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html

2、http://bbs.csdn.net/topics/390775296

浅析JavaScript的prototype的更多相关文章

  1. javascript 之 prototype 浅析

    prototype 原型 javascript 是一种 prototype based programming 的语言, 而与我们通常的 class based programming 有很大 的区别 ...

  2. 浅析 JavaScript 中的 函数 currying 柯里化

    原文:浅析 JavaScript 中的 函数 currying 柯里化 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字 ...

  3. 浅析 JavaScript 中的 函数 uncurrying 反柯里化

    柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...

  4. Javascript: 从prototype漫谈到继承(2)

    本文同时也发表在我另一篇独立博客 <Javascript: 从prototype漫谈到继承(2)>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了!) 上 ...

  5. JavaScript 笔记 ( Prototype )

    这阵子实在好忙 ( 这样说好像也不是一两个月了... ),然后因为工作伙伴都是 JavaScript 神之等级的工程师,从中也学到不少知识,毕竟就是要和强者工作才会成长呀!为了想好好瞭解他们写的程式码 ...

  6. Javascript Array.prototype.some()

    当我们使用数组时,查找数组中包含某个特殊的项是非常常见的动作.下面例子是一个简单的实现: 01 planets = [ 02     "mercury", 03     " ...

  7. JavaScript和prototype

    Protoype这个词在javascript中可以有两种理解: 第一种是作为javascript中的一个属性,其一般出现的形式为:类名.prototype. prototype 属性让你有能力向对象添 ...

  8. 在 JavaScript 中 prototype 和 __proto__ 有什么区别

    本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的 ...

  9. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

随机推荐

  1. HDU - 1248 寒冰王座 数学or暴力枚举

    思路: 1.暴力枚举每种面值的张数,将可以花光的钱记录下来.每次判断n是否能够用光,能则输出0,不能则向更少金额寻找是否有能够花光的.时间复杂度O(n) 2.350 = 200 + 150,买350的 ...

  2. linux rsync实时同步

    rsync同步 同步与复制的差异:复制:完全拷贝源到目标同步:增量拷贝,只传输变化过的数据 同步操作:remote sync 远程同步支持本地复制,或与其他ssh,rsync主机同步.官方网站:htt ...

  3. Node 定时器详解

    JavaScript 是单线程运行,异步操作特别重要. 只要用到引擎之外的功能,就需要跟外部交互,从而形成异步操作.由于异步操作实在太多,JavaScript 不得不提供很多异步语法.这就好比,有些人 ...

  4. 安装sphinx和coreseek

    sphinx简介 Sphinx是由俄罗斯人Andrew Aksyonoff开发的一个全文检索引擎.意图为其他应用提供高速.低空间占用.高结果 相关度的全文搜索功能.Sphinx可以非常容易的与SQL数 ...

  5. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  6. JDBC异常之数据库表不存在

    JDBC异常之数据库表不存在 1.具体错误如下: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException:Table 'YHD.t_yhd_ ...

  7. WebService之CXF注解之五(配置文件)

    1.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=" ...

  8. Caused by: java.io.FileNotFoundException: class path resource [applicationContext.xml] cannot be ope

    1.错误描述 java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.tes ...

  9. freemarker写select组件(四)

    freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...

  10. 从DataTable中查询数据

    /// <summary> /// 从DataTable中查询数据 /// </summary> /// <param name="tb">待处 ...