一直以来对Javascript的继承关系都是通过死记硬背下来的,对于一个理科生,喜欢逻辑思维的人来讲,死记硬背特别头痛,且理科生对于能够死记硬背下来的东西也很容易忘记,不知道其他理科生童鞋们是否如此,长时间发现,我是这样的,喜欢逻辑性的东西, 不太喜欢死记硬背。最近看过篇文章《Javascript继承机制的设计思想》(原文地址),

  原文写的很好,当中讲了Javascript的继承产生思路。

如下列举一下表过程:

1.1994年,网景公司(Netscape)发布了Navigator浏览器0.9版,可以浏览网页了(无前段交互,无网页互动)。

2.工程师Brendan Eich负责开发这种新语言(使得浏览器可以与网页互动的网页页脚本语言)

3.在其他面向对象的语言的影响下,设计了继承机制(为了降低难度,没有引入“类”的概念,使用了概念有:构造器constructor,new)

4.为做好数据共享,增加了prototype。

说说继承,为了学习继承,编写了如下脚本

javascript中的数据继承是通过_proto_ chain来实现的

javascript中继承机制的实现:

JavaScript中的原型(prototype)是和函数(function)紧密相连的,因为每个函数默认都会有一个属性叫prototype, 每一个通过函数和new操作符生成的对象都具有一个属性__proto__, 这个属性保存了创建它的构造函数的prototype属性的引用。这个__proto__对象就是实现原型链的核心对象。JavaScript是一门面向对象的编程语言,它的继承特性其实就是通过原型链机制来实现的。同时,instanceof运算符也需要在原型链的支持。”

写了一段代码如下:

<script>
function Person(name){
this.name = namel;
} alert(Person instanceof Object);//true //方式一
Person.prototype.species = "ABC";
Person.prototype.DoHardWork = function () {
alert(this.species);
}
//方式二:两种方式等价,但有区别
Person.prototype = {
species: "ABC",
DoHardWork: function () { alert(this.species) }
};//相当于 Person.prototype = new Object({……});所以,Person.prototype.constructor === Object;
Person.prototype.constructor = Person;//有利溯源查看Person这个原型, var father = new Person("张三");//father 中有 __propotype__属性,指向了Person.prototype;
var uncle = new person("张四"); var Son = function (name) { this.name = name; }; Son.prototype = father;
son.prototype.constructor = Son; var son1 = new Son("张小三");//son1中__propotype__指向了father,father 中有 __propotype__属性,指向了Person.prototype;
/*
查看Son: son1.constructor;
查看Person:son1.constructor.prototype.constructor,//如果没有 Person.prototype.constructor = Person;这句话,就不能获取到Person 通过new生成的对象的Constructor找构造对象,通过构造对象(也是函数)获取继承的Prototype对象,通过Prototype对象的Constructor获取原函数。
*/
</script>

Javascript 追本溯源的更多相关文章

  1. JavaScript系列--浅析原型链与继承

    一.前言 继承是面向对象(OOP)语言中的一个最为人津津乐道的概念.许多面对对象(OOP)语言都支持两种继承方式::接口继承 和 实现继承 . 接口继承只继承方法签名,而实现继承则继承实际的方法.由于 ...

  2. JavaScript with Image:创建缩略图

    当图片很大,直接把图片从Server下载到浏览器上看是一种很不明智的做法,浪费了服务器的资源,网络带宽和客户端的资源.所以,通常Server和Client之间会传输缩略图,只有当Client请求某张图 ...

  3. 追本溯源:substr与substring历史漫话

    引子: 很多时候,当我要字符串截取时,我会想到substr和substring的方法,但是具体要怎么传参数时,我总是记不住.哪个应该传个字符串长度,哪个又应该传个开始和结尾的下标,如果我不去查查这两个 ...

  4. 面试说:聊聊JavaScript中的数据类型

    前言 请讲下 JavaScript 中的数据类型? 前端面试中,估计大家都被这么问过. 答:Javascript 中的数据类型包括原始类型和引用类型.其中原始类型包括 null.undefined.b ...

  5. JavaScript之父Brendan Eich,Clojure 创建者Rich Hickey,Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  6. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  7. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

  8. 探究javascript对象和数组的异同,及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  9. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

随机推荐

  1. WebForm,Winfrom下拉框添加全部行

    WebForm: dropPostalLineNo.DataSource = "数据源";        dropPostalLineNo.DataTextField = &quo ...

  2. extjs combobox 设置下拉时显示滚动条 设置显示条数

    extjs在点击下拉时如果没有限制它的高度,那么它的默认最大高度是300,显示的时候就会显示300的高度,知道选项内容超过这个高度时才会自动显示滚动条,往往在有些时候我们希望让combobox显示一个 ...

  3. thinkphp的nginx配置

    thinkphp的nginx配置 server { listen 80; server_name www.abc.com; #charset utf-8; access_log /var/www/ww ...

  4. JavaScript错误处理

    JavaScript 错误 - Throw.Try 和 Catch JavaScript 测试和捕捉 try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代 ...

  5. scrapy1.1入门用例简介

    今天将scrapy安装成功,测试了下,倒腾了好长时间,才倒腾成功,特此分享. 其实最好的老师就是scrapy的帮助文档,只要把文档看懂,照着做,也就啥都会儿了! 帮助文档下载见http://downl ...

  6. a标签无disabled属性

    <a class="button">确认</a> 我们经常会用a标签来设置按钮样式,如果点击它跳转页面,那么没有任何问题. 如果绑定了ajax事件,即点击后 ...

  7. 蟠桃记 AC 杭电

    蟠桃记 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  8. 《FPGA零基础入门到精通视频教程》-第001b讲软件的破解

    高清视频和配套讲义这里下载 http://www.fpgaw.com/thread-68128-1-1.html 优酷视频地址,不是很清楚

  9. ubuntu后台运行命令行

    ubuntu 程序后台运行几个方法 . 程序后加上“&” ,即 “./myjob &”, 将命令放入到一个作业队列中,可以用命令“jobs” 查看 . 将1中的命令放在 “()”中, ...

  10. Android 之 WebView

    1:在AndroidManifest.xml中添加允许android访问网络权限. <uses-permission android:name="android.permission. ...