写到这篇,我的js系列也快接近尾声了,所以这个系列不会遗留js来实现面向对象的核心——原型,有些人说原型不好理解,其实嘛,要想系统

的理解原型,最便捷的方式就是看看经典的书,少看些博客,博客这东西只是博主自己的个人理解,充其量是些配味的佐料。

 

一:继承

如果你熟悉C#的话,你肯定会知道,所有的类都是继承于Object的,这样我就拥有Object所具有的功能了,如下图中我定义的Person类。

从图中可以看到,在C#中到处都是继承,下一步我要做的就是自定义继承,如下图中我定义的Student类,让它继承Person.Name属性。

这些对于玩C#的人来说都是很司通见惯的,那么下一个问题来了,这些真正的面向对象的东西,在js中该怎么玩呢?当然就要用到大名鼎鼎的

prototype属性了。

二:用JS来模仿C#的继承

1.默认继承Object

 我们都知道在js中的所有引用类型也同样继承于Object,这样也就具有Object的功能了,但是你有没有考虑过,比如下图中的Person到底是怎么继承

了Object的所有属性和方法呢?

看到上图后,你是不是很好奇呢?其实原理真的很简单,用chorme的watch expressions一看你就一清二楚了。

第一眼看到不知道你会不会眼晕?听我慢慢解释,从上面的图中不难看到,其实有这么个原型链的关系:

p.__proto__ =Person.prototype

Person.prototype.__proto__ -> new Object()

不知道你看懂了没?其实这里最重要的就是__proto__属性,首先你要知道,每个实例都具有这么个__proto__属性,因为这是核心,比如你要找

p.toString()方法, js引擎会优先在Person function中找toString()方法,发现没有。。。花擦。。。没辙只能通过p.__proto__属性继续往上

查找,到了Person.prototype,从图中可以看到prototype是一个具有constructor属性的对象,因为只有一个属性,所以也没找到tostirng()方法,

然后沿着Person.prototype._proto__找到了Object,在这里我们就找到了toString()方法。

2.自定义继承

我们知道prototype是个非常重要的属性,为了模仿C#中Student类继承于Person类,这次我需要做的是让Studnet.prototype=new Person()就好了。

从图中可以看到student实例已经含有Name属性了,我们现在已经知道有一个原型链查找的过程,比如我现在通过student.__proto__找到了new Person(),

然后也看到了new Person()具有Name属性,我想你现在也知道,在Person函数中也有一个__proto__属性,它是指向Object的,如果说我在new Person()

中没有找到,那么会继续通过Person.__proto__(Student.prototype.proto__)继续往上找,一直找到顶端为止。

三:详解prototype

1. prototype到底是什么?

从上一章中我想你对prototype应该有了宏观了解,可以看到其实prototype只不过是一个包含constructor属性的Object对象,其中constructor属性是指

向当前function的一个指针,代码还原如下:

 <script type="text/javascript">
function Person() {
this.Name = "ctrip";
} Person.prototype = {
constructor: Person //指向Person的constructor
}; var p = new Person();
</script>

2. prototype上面的属性可以被所有实例共享。

  这个之所以能够共享,是因为每个实例都有__proto__属性,包括function的prototype属性也是有__proto__属性的,这是因为prototype本质上

也是一个对象的实例,所以js在查找某个属性是否存在的时候会通过__proto__属性一直追踪到object。

3. 如果function中的属性与prototype属性冲突了怎么办?

看到答案后,我想你也非常清楚了,毕竟你已经理解了原型链的查找,因为js引擎查找过程是先从本函数查找,如果找到就return,找不到继续通过

__proto__往上找,很好理解的。

Javascript之旅——第十一站:原型也不好理解?的更多相关文章

  1. Javascript之旅——第十站:为什么都说闭包难理解呢?

    研究过js的朋友大多会说,理解了js的原型和闭包就可以了,然后又说这些都是js的高级内容,然后就又扯到了各种神马的作用域...然后不少 人就会被忽悠的云里雾里...下面我也试着来说说闭包,看我说的这个 ...

  2. Javascript之旅——第八站:说说instanceof踩了一个坑

    前些天写js遇到了一个instanceof的坑,我们的页面中有一个iframe,我在index页面中计算得到了一个array,然后需要传递到Flight页面 这个嵌套的iframe中的一个函数(Sea ...

  3. Javascript之旅——第七站:说说js的调试

    最近比较吐槽,大家都知道,现在web前端相对几年前来说已经变得很重了,各种js框架,各种面对对象,而且项目多了,就会提取公共模块, 这些模块的UI展示都一样,不一样的就是后台逻辑,举个例子吧,我们做企 ...

  4. Javascript之旅——第五站:说说那些所谓的包装类型

    最近不看犀牛书了,那本翻译的特烂而且好拗口,尤其是原型那块说的乱七八糟,后来经同事介绍,买了本js高级程序设计,然后就继续 苦逼的看,不吐槽了,继续说说js中有新鲜感的包装类型. 一:String 说 ...

  5. Javascript之旅——第四站:parseInt中要注意的坑

    前些天信用卡站点要接入一个新功能,不过还真比较坑爹,asp站点,大家都知道信用卡的背面是有一个有效期的,在对接银行中这个信息 一定是要传给银行做数据校验,用户在语音输入信用卡有效期后,系统会做一个有效 ...

  6. Sql Server之旅——第十一站 简单说说sqlserver的执行计划

    我们知道sql在底层的执行给我们上层人员开了一个窗口,那就是执行计划,有了执行计划之后,我们就清楚了那些烂sql是怎么执行的,这样 就可以方便的找到sql的缺陷和优化点. 一:执行计划生成过程 说到执 ...

  7. Javascript之旅——第六站:看看writable特性

    说起js中的那些特性标记,总觉得有些怪怪的,那为什么要说到这个attribute,起源于对一个问题的疑问,我们都知道window对象其实就是 浏览器窗口的一个实例,既然是一个实例,那这个实例就应该有“ ...

  8. Javascript之旅——第三站:几个需要注意的运算符

    平时写惯了C#,所以会觉得什么样的运算符就应该做什么样的运算,但是有一天你的习惯被其他语言颠覆了,不知道是不是有一股强大的好奇 心,刚好在js中,我的这种习惯就被颠覆了,下面就看看哪些运算符颠覆了我的 ...

  9. 对JavaScript中的静态属性和原型属性的理解

    首先是在访问上的区别,当访问实例对象的某个属性但它本身没有时,它就会到原型中去查找,但不会去查找静态属性. // 实例对象不会去查找静态属性 function Foo(){} Foo.a = 1; v ...

随机推荐

  1. 取得 APP 自己的版本号 (狠跨 4 个平台)

    XE7 源码下载:[原创]取得APP自己的版本号(狠跨4个平台)XE7.zip XE6 源码下载:[原创]取得APP自己的版本号(狠跨4个平台)XE6.zip XE5 源码下载:[原创]取得APP自己 ...

  2. 在linux中连接wifi

    分为以下步骤:-----------(键入以下命令的时候注意大小写与空格.) 1. 进入终端treminal 获取管理员权限---------------------- su 命令(# su) 2. ...

  3. 《Java4Android》视频学习笔记——包和访问权限(一)

    怎么打包?代码如下 package org.marsdroid; class Test{ public static void main(String args[]){ System.out.prin ...

  4. mysql数据过滤

    WHERE子句 在我们使用数据库时,通常只会根据特定条件提取表数据的子集.只检索所需数据需要指定搜索条件(search criteria),搜索条件也称为过滤条件(filtercondition). ...

  5. 设置placeholder字体颜色

    /*设置placeholder字体颜色*/::-webkit-input-placeholder{ color: #FFF;}:-ms-input-placeholder{ color: #FFF;} ...

  6. [iOS] 建立与使用Framework

    [iOS] 建立与使用Framework 前言 使用XCode开发iOS项目时,开发人员可以将可重用的程序代码,封装为Library或是Framework来提供其他开发人员使用.这两种封装方式在使用的 ...

  7. 定制Eclipse IDE之插件篇(一)

    上文回顾:定制Eclipse IDE之功能篇(二) 在这篇文章中,我会将我定制eclipse用到的其他插件罗列出来. 一.汉化插件 Eclipse本身是英文显示的,我们能够通过插件汉化.  1. 选择 ...

  8. iframe父页面获取子页面的高度

    最近做项目中用到了iframe,子页面更改父页面的高度,经过九九八十一难,找到了解决的办法. $(window).load(function() {  var h=$(document).height ...

  9. jquery取消事件冒泡的三种方法(推荐)

    1.通过返回false来取消默认的行为并阻止事件起泡. jQuery 代码: ? 1 2 3 4 5 6 7 8 9 10 11 $("form").bind(   "s ...

  10. sharepoint2010问卷调查(4)-实现问卷的重复答复次数(采用自定义字段类型和JS)

    sharepoint的问卷调查可以设置重复和一次答复.但是设置一次后,调查过的用户再进行答复.会提示如下图: 分析下:该提示用户体验很不好.给用户感觉是系统出问题了.因此网上有人提出用eventhan ...