js中的继承,是面向对象的知识,由于js没有类的概念。所以继承是通过对象实现的。谈到继承。就必须说到prototype,就不得不先说下new的过程。

一个小小的列子:

<script type="text/javascript">
var Person = function () { };
var p = new Person();
</script>

我们来看看这个new到底做了什么?我们能够把new的过程拆分成以下三步:

<1> var p={}; 也就是说。初始化一个对象p。

<2> p.proto=Person.prototype;

<3> Person.call(p);也就是说构造p。也能够称之为初始化p。

关键在于第二步,我们来证明一下:

alert(p.__proto__ === Person.prototype);

这段代码会返回true。说明我们步骤2的正确。

那么proto是什么?我们在这里简单地说下。每一个对象都会在其内部初始化一个属性。就是proto,当我们訪问一个对象的属性 时。假设这个对象内部不存在这个属性,那么他就会去proto里找这个属性,这个proto又会有自己的proto,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。

依照标准,proto是不正确外公开的,也就是说是个私有属性,可是Firefox的引擎将他暴露了出来成为了一个共同拥有的属性,我们能够对外訪问和设置。

<script type="text/javascript"> var Person = function () { };
Person.prototype.Say = function () {
alert("Person say");
}
var p = new Person();
p.Say();
</script>

这段代码非常easy。相信每一个人都这样写过,那就让我们看下为什么p能够訪问Person的Say。

首先var p=new Person();能够得出p.proto=Person.prototype。那么当我们调用p.Say()时,首先p中没有Say这个属性, 于是,他就须要到他的proto中去找。也就是Person.prototype,而我们在上面定义了 Person.prototype.Say=function(){}; 于是,就找到了这种方法。

以下我们再看一下有点挑战的。

function tiger(){
this.bark=function(){
alert("我会咬人");
};
};
//这里先定义一个老虎方法 function cat(){
this.climb=function(){
alert("我会爬树");
};
}; //定义一个猫方法 //怎么通过继承让老虎也学会爬树?以下開始继承。 tiger.prototype=new cat();
var hnhu=new tiger(); hnhu.climb();
hnhu.valueof(); //是不是非常奇妙,老虎也会怕会啦。嘿嘿

结合上面的概念,我分析一下详细的继承过程,首先new一个tiger对象。有hnhu.proto=tiger.prototype,有由于tiger.prototype=new cat();

所以tiger.prototype.proto=cat.prototype。至此继承已经付出水面。转化一下得到:

hnhu.proto=tiger.prototype

hnhu.proto.proto=cat.prototype

好,算清楚了之后我们来看上面的结果,hnhu.climb()。由于hnhu没有climb这个属性。于是去hnhu.proto。也就是 tiger.prototype中去找,由于tiger.prototype中也没有climb,那就去hnhu.proto.proto,也就是cat.prototype中去找,于是就找到了alert(“我会爬树”);的方法。

寻找valueof()也都是相同的道理。这条链就形成了原型链,继承也就通过原型链得以实现。

以上代码图示:

原型和原型链就是这样。跟作用域和作用域链相似,须要慢慢品味当中的精华。

掌握了在来实际用一下把。企鹅的一道继承面试题,大概意思是一仅仅狗刚開始会呜呜的叫。然后发生某种变异,叫声变为变异。

function dog(){
this.fark=function(){
alert("呜呜");
};
}; function peter(){
this.money=function(){
alert("我是有钱狗");
};
}; peter.prototype=new dog();
peter.prototype.bark=function(){
alert("变异");
};
var tz=new peter();
tz.bark();
tz.fark();

你还能够在Object.prototype上添加一些新属性。加入上之后无论是不是变异狗都具有这项属性。由于Object处于原型链的倒数第二层,上面的方法都会继承它的属性。

Javascript中的原型继承具体解释的更多相关文章

  1. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  2. javascript中的原型继承

    在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <cod ...

  3. javascript 中的原型继承

    javascript圆形变成的基本规则: 所有数据都是对象: 要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它: 对象会记住它的原型: 如果对象无法响应某个请求,它会把这个请求委托给 ...

  4. JavaScript中的原型继承原理

    在JavaScript当中,对象A如果要继承对象B的属性和方法,那么只要将对象B放到对象A的原型链上即可.而某个对象的原型链,就是由该对象开始,通过__proto__属性连接起来的一串对象.__pro ...

  5. JS中的原型继承机制

    转载 http://blog.csdn.net/niuyongjie/article/details/4810835 在学习JS的面向对象过程中,一直对constructor与prototype感到很 ...

  6. JavaScript中一个对象如何继承另外一个对象

    如题,JavaScript中一个对象a如何继承另外一个对象b.即将b中的属性和方法复制到a中去. 面试中遇到了这个问题,当时脑子里的想法是: 1.除了循环遍历复制,还能怎样 2.javascript中 ...

  7. 【转】JavaScript中的原型和继承

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...

  8. 深入了解JavaScript中基于原型(prototype)的继承机制

    原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用 ...

  9. 图解JavaScript中的原型链

    转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof o ...

随机推荐

  1. bzoj 4521 [ Cqoi 2016 ] 手机号码 —— 数位DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4521 数位DP,记录好多维状态: 写了半天,复杂得写不下去了,于是参考一下TJ... 练习简 ...

  2. LA4788

    贪心 这个贪心不太懂啊 dfs返回子树需要的最小值,然后按需要减消耗排序,然后贪心选取即可. #include<bits/stdc++.h> using namespace std; ty ...

  3. Reactive Native开发环境搭建

    root@zhongzhenhua-virtual-machine:~/AndroidCode# repo init -u https://android.googlesource.com/platf ...

  4. HDU3085 Nightmare Ⅱ

    题目: Last night, little erriyue had a horrible nightmare. He dreamed that he and his girl friend were ...

  5. Vue页面间传值,以及客户端数据存储

    初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正. 一.参数传值 如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值. 这里页面是通过 ...

  6. SQLServer2008 将“单个用户”改为“多用户”

    一开始是要想要分离掉数据库,然后将其删除 不知道为什么一直分离不了,试了很多次,又尝试直接删除 结果数据库突然显示成了“单个用户” 尝试查看其属性,或者“新建查询”也都报错,提示已经有其他用户建立了连 ...

  7. JavaScript Array 整理 - 元素操作

    整理一下Array对象中针对元素操作的方法. 分别是: concat (组合数组) join(数组转字符串) pop(删除最后一个元素) shift(删除第一个元素) push(在数组尾部添加新元素) ...

  8. list用法(用到了再补充)

    之前学list吧,也知道很多,但是到用的时候却无从下手,还是不熟悉的缘故,看来基础知识应该再加强,要达到信手拈来的程度才行. 先说下list的特性:有序可重复,也可以存储多个空值. 我用到的方法: L ...

  9. Java_Web之状态管理

    回顾及作业点评: (1)JSP如何处理客户端的请求? 使用response对象处理响应 (2)请描述转发与重定向有何区别? 转发是在服务器端发挥作用,通过forward方法将提交信息在多个页面间进行传 ...

  10. AI:AI是什么?

    古老的哲学对科学有永远的借鉴意义,科学上的咬文嚼字往往会让其丧失完备性. 一.AI是什么 你看起来它有多好,它就有多好.本质只能通过表象来描述,在色即是空的逻辑里,图灵测试也许是最精准的AI测试方式. ...