Javascript之旅——第十一站:原型也不好理解?
写到这篇,我的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之旅——第十一站:原型也不好理解?的更多相关文章
- Javascript之旅——第十站:为什么都说闭包难理解呢?
研究过js的朋友大多会说,理解了js的原型和闭包就可以了,然后又说这些都是js的高级内容,然后就又扯到了各种神马的作用域...然后不少 人就会被忽悠的云里雾里...下面我也试着来说说闭包,看我说的这个 ...
- Javascript之旅——第八站:说说instanceof踩了一个坑
前些天写js遇到了一个instanceof的坑,我们的页面中有一个iframe,我在index页面中计算得到了一个array,然后需要传递到Flight页面 这个嵌套的iframe中的一个函数(Sea ...
- Javascript之旅——第七站:说说js的调试
最近比较吐槽,大家都知道,现在web前端相对几年前来说已经变得很重了,各种js框架,各种面对对象,而且项目多了,就会提取公共模块, 这些模块的UI展示都一样,不一样的就是后台逻辑,举个例子吧,我们做企 ...
- Javascript之旅——第五站:说说那些所谓的包装类型
最近不看犀牛书了,那本翻译的特烂而且好拗口,尤其是原型那块说的乱七八糟,后来经同事介绍,买了本js高级程序设计,然后就继续 苦逼的看,不吐槽了,继续说说js中有新鲜感的包装类型. 一:String 说 ...
- Javascript之旅——第四站:parseInt中要注意的坑
前些天信用卡站点要接入一个新功能,不过还真比较坑爹,asp站点,大家都知道信用卡的背面是有一个有效期的,在对接银行中这个信息 一定是要传给银行做数据校验,用户在语音输入信用卡有效期后,系统会做一个有效 ...
- Sql Server之旅——第十一站 简单说说sqlserver的执行计划
我们知道sql在底层的执行给我们上层人员开了一个窗口,那就是执行计划,有了执行计划之后,我们就清楚了那些烂sql是怎么执行的,这样 就可以方便的找到sql的缺陷和优化点. 一:执行计划生成过程 说到执 ...
- Javascript之旅——第六站:看看writable特性
说起js中的那些特性标记,总觉得有些怪怪的,那为什么要说到这个attribute,起源于对一个问题的疑问,我们都知道window对象其实就是 浏览器窗口的一个实例,既然是一个实例,那这个实例就应该有“ ...
- Javascript之旅——第三站:几个需要注意的运算符
平时写惯了C#,所以会觉得什么样的运算符就应该做什么样的运算,但是有一天你的习惯被其他语言颠覆了,不知道是不是有一股强大的好奇 心,刚好在js中,我的这种习惯就被颠覆了,下面就看看哪些运算符颠覆了我的 ...
- 对JavaScript中的静态属性和原型属性的理解
首先是在访问上的区别,当访问实例对象的某个属性但它本身没有时,它就会到原型中去查找,但不会去查找静态属性. // 实例对象不会去查找静态属性 function Foo(){} Foo.a = 1; v ...
随机推荐
- How to throw an error in MySql procedure?
http://stackoverflow.com/questions/4862911/how-to-throw-an-error-in-mysql-procedure 9down votefavori ...
- EL表达式错误attribute items does not accept any expressions
解决方法是将 <%@taglib prefix="c" uri="http://java.sun.com/jstl/core"%> 改成 <% ...
- PLSQL怎样导出oracle表结构和数据
1.导出表结构和数据方式1.tools->export user objects是导出表结构 tools ->export user object 选择选项,导出.sql文件 说明:导出的 ...
- Java关于Properties用法的总结(一)
最近项目中有一个这样的需求,要做一个定时任务功能,定时备份数据库的操表,将表数据写入txt文件.因为文件的读写路径可能需要随时改动,所以写死或者写成静态变量都不方便,就考虑使用配置文件,这里总结些配置 ...
- TestNG官方文档中文版(5)-测试方法/类和组
5 - Test methods, Test classes and Test groups 5.1 - Test groups TestNG容许执行复杂的测试方法分组.不仅可以申明方法属于组,而且可 ...
- Wami Map Project – 开源的 OSM API 服务
Wami 地图项目把 OSM 数据分享给所有的人,很容易使用.他们利用 MongoDB 的潜力进行大数据管理来实现从 OSM 数据来源搜索相关的数据.它们的 API 使人们有可能检索不同格式的 POI ...
- [deviceone开发]-一个很炫的手势动画示例
一.简介 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手 ...
- CSS代码记录
1. 内容横向滚动的代码 .ul { display: box; display: -webkit-box; width: 250px; background: yellow; overflow-y: ...
- 定制Eclipse IDE之插件篇(二)
上文回顾:定制Eclipse IDE之插件篇(一) 延续上一篇的插件篇,这一篇将会讲到一个最关键的插件aptana. 一.aptana插件 官方的解释我就不说了,从下面图可以看到插件提供了什么功能,列 ...
- JavaScript学习笔记-实例详解-类(一)
实例详解-类(一): //每个javascript函数(除了bind())都自动拥有一个prototype对象// 在未添加属性或重写prototype对象之前,它只包含唯一一个不可枚举属性const ...