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的方法同名的方法会怎么样?

 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怎么办?答案是可以使用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的对象方法,假如有下面这种写法:

ExtendClass.prototype = new BaseClass();指的是ExtendClass的原型指向BaseClass原型的属性

ExtendClass prototype = BaseClass;指的是ExtendClass的原型执行BaseClass本身。

JS学习之prototype属性的更多相关文章

  1. JS中的prototype属性

    JavaScript是基于对象的,任何元素都可以看成对象.然而,类型和对象是不同的.本文中,我们除了讨论类型和对象的一些特点之外,更重要的 是研究  如何写出好的并且利于重用的类型.毕竟,JavaSc ...

  2. js学习笔记2---HTML属性操作

    1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...

  3. Vue.js学习 Item5 -- 计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  4. js学习笔记22----BOM属性和方法

    BOM基本概念 : Browser Object Model 浏览器对象模型. BOM属性: window.navigator.userAgent : 浏览器信息 判断是否是某个浏览器,可以用 ind ...

  5. js函数prototype属性学习(二)

    继续探讨js对象的prototype属性,前面已经看到在创建完一个对象之后,随时都会有一个_proto_属性伴随所有,那么,这个_proto_又是用来干嘛的,面试时问的高大上的原型链又是怎么回事? 拿 ...

  6. Javascript中prototype属性详解

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

  7. Javascript中prototype属性的详解

    原文链接:http://www.cnblogs.com/Uncle-Keith/p/5834289.html 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象 ...

  8. 论js中的prototype

    今天在阅读代码时,碰到了prototype //判断是否是数组function isArray(obj) { return Object.prototype.toString.call(obj) == ...

  9. 详解Javascript中prototype属性(推荐)

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

随机推荐

  1. 设计模式之PHP项目应用——单例模式设计Memcache和Redis操作类

    1 单例模式简单介绍 单例模式是一种经常使用的软件设计模式. 在它的核心结构中仅仅包括一个被称为单例类的特殊类. 通过单例模式能够保证系统中一个类仅仅有一个实例并且该实例易于外界訪问.从而方便对实例个 ...

  2. 统计分析SQL Server Profiler 跟踪的SQL

    --跟踪文件读入到表中分析 SELECT * INTO ZGSJY FROM fn_trace_gettable('E:\wxxcdbprofiler.trc', default); --某时间内,最 ...

  3. 集合的实现 -- 数据结构与算法的javascript描述 第九章

    集合 集合(set)是一种包含不同元素的数据结构. 集合中的元素称为成员. 集合的两个最重要特性是:首先,集合中的成员是无序的:其次,集合中不允许相同成员存在. code function Set() ...

  4. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

  5. SQL学习之HAVING过滤分组

    1.SQL除了能用Group By分组数据之外,SQL还允许过滤分组,规定包括那些分组,排除那些分组.例如,你可能想要列出至少有两个订单的所有顾客.为此,必须基于完整的分组而不是个别的行进行过滤. 基 ...

  6. JavaScript之ClassName属性学习

    在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你 ...

  7. swipe.js文档及用法

    最近的一个项目中使用到了swipe.js这个插件 感觉非常的好用的 官方网站 http://swipejs.com/ https://github.com/bradbirdsall/Swipe 简介 ...

  8. C# 微信公众平台开发(1)-- 服务器配置

    题记:最近公司需要开发微信服务号,由本人负责,以前虽然听过微信开发,但并没有认真的去了解,项目开发中,也边看文档边开发,记录自己的项目开发经验: 1.注册帐号--填写服务器配置 在https://mp ...

  9. 最小生成树Jungle Roads

    这道题一定要注意录入方式,我用的解法是prime算法 因为单个字符的录入会涉及到缓冲区遗留的空格问题,我原本是采用c语言的输入方法录入数据的,结果对了,但是提交却一直wrong,后来改成了c++的ci ...

  10. c++ build options(important)

    The C runtime library  4 versions: Multi-threaded (/MT) Multi-threaded Debug (/MTd) Multi-threaded D ...