原型链是JavaScript的基础性内容之一。其本质是JavaScript内部的设计逻辑。

首先看一组代码:

 <script type="text/javascript">
function parent(){
this.name="cehis";
} function son(){
this.age=;
} function sub(){
this.sex="nan";
} //简单实现下继承
son.prototype=new parent();
sub.prototype=new son(); var sunfromsub=new sub();
var sonformson=new son();
console.log(sunfromsub.name,sunfromsub.age,sunfromsub.sex); //cehis 11 nan
console.log(sonformson.name,sonformson.age,sonformson.sex); //cehis 11 undefined //看一下__proto__这个属性
console.log(sunfromsub.__proto__);
console.log(sunfromsub.__proto__.__proto__);
console.log(sunfromsub.__proto__.__proto__.__proto__);
console.log(sunfromsub.__proto__.__proto__.__proto__.__proto__);
console.log(sunfromsub.__proto__.__proto__.__proto__.__proto__.__proto__);//null console.log(sonformson.__proto__);
console.log(sonformson.__proto__.__proto__);
console.log(sonformson.__proto__.__proto__.__proto__);
console.log(sonformson.__proto__.__proto__.__proto__.__proto__);//null
</script>

总结一下知识点:

prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。

__proto__是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性),是JS内部使用寻找原型链的属性

简单来说通过级联访问__proto__这个属性,就往js内部原型追溯。一直到null为止。

JavaScript原型链就是__proto__形成的链条。是一种静态的结构。

而JavaScript的继承是JavaScript内部的一种访问机制。这种机制就是回溯__proto__形成的链条。

结果:构造函数的实例可以继承构造函数自身的和原型上属性值。一直继承到null为止。

需要指出的是,JavaScript继承的方式有不止一种,上述代码中,构造函数实例既继承了构造函数的原型数据也继承了构造函数数据。

如果使用下面的代码实现继承:

       function parent(){
this.name="cehis";
}
function son(){
this.age=;
} son.prototype=new parent();
son.prototype.id=;
//只是继承构造函数原型上属性也就是继承id
var audience1=Object.create(son.prototype);
//既不会继承构造函数自身属性也不会继承构造函数原型属性
var audience2=Object.create(son); console.log(audience1.id,audience1.age,audience1.name); //111 undefined "cehis"
console.log(audience2.id,audience2.age,audience2.name); //undefined undefined "son"

使用Object.create创建实例,实现继承,如果参数是构造函数本身则会继承构造函数的属性,但是不会继承其父元素的原型对象的属性。

如果参数是原型prototype则会继承父元素属性以及构造函数原型属性。

如果使用apply或者call方式实现继承。

  function parent(name,age) {
this.name =name;
this.age=age;
}
parent.prototype.id=;
function son(name,age,sex) {
parent.call(this,name,age);
this.sex =sex;
} var example=new son("jack",,"nan");
console.log(example.name,example.age,example.sex,example.id);//jack 12 nan undefined

以上只是继承了构造函数自身的属性,而没有继承构造函数原型的属性。apply或者call本身是借用,而不是继承。

严格来说只有new 和 Object.create()才是继承。才会回溯。

更新2018年7月25 一个有趣的想象

     function test(name){
this.name=name;
} console.log(test.__proto__.__proto__);//会连接到null
console.log(test.prototype);//含有constructor属性
console.log(test.prototype.prototype);//undefined
console.log(test.prototype.constructor);//自身
console.log(test.constructor.prototype.constructor); //这是一个无限循环
结论:只有沿着__proto__追溯才能追溯到根null。而不是沿着prototype,所以继承是因为__proto__。

明白JavaScript原型链和JavaScrip继承的更多相关文章

  1. JavaScript原型链及继承

    在JavaScript中,所有的东西都是对象,但是JavaScript中的面向对象并不是面向类,而是面向原型的,这是与C++.Java等面向对象语言的区别,比较容易混淆,因此把我自己学习的过程记录下来 ...

  2. JavaScript 原型链学习(四)原型链的基本概念、原型链实现继承

    简单回顾一下构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.那么,假如我们让原型对象等于另一个类型的实例,结果会 ...

  3. JavaScript学习总结(十七)——Javascript原型链的原理

    一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中, ...

  4. [js高手之路]从原型链开始图解继承到组合继承的产生

    基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 f ...

  5. javascript原型链中 this 的指向

    为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = { d: 40 }; var a = { x: 10, calculate: function (z) ...

  6. Javascript 原型链资料收集

    Javascript 原型链资料收集 先收集,后理解. 理解JavaScript的原型链和继承 https://blog.oyanglul.us/javascript/understand-proto ...

  7. 资料--JavaScript原型链

    JavaScript原型链 原文出处:https://www.cnblogs.com/chengzp/p/prototype.html 目录 创建对象有几种方法 原型.构造函数.实例.原型链 inst ...

  8. JavaScript原型链及其污染

    JavaScript原型链及其污染 一.什么是原型链? 1.JavaScript中,我们如果要define一个类,需要以define"构造函数"的方式来define: functi ...

  9. JavaScript原型链:prototype与__proto__

    title: 'JavaScript原型链:prototype与__proto__' toc: false date: 2018-09-04 11:16:54 主要看了这一篇,讲解的很清晰,最主要的一 ...

随机推荐

  1. 《Java核心技术36讲》阅读笔记:谈谈对Java平台的理解笔记

    1. 谈谈你对Java平台的理解. Java是一种面向对象的语言,最显著的特性有两个方面: 一个就是一次编译,到处运行(Write once, run anywhere),能够非常容易的获得跨平台能力 ...

  2. Hadoop学习(二) Hadoop配置文件参数详解

    Hadoop运行模式分为安全模式和非安全模式,在这里,我将讲述非安全模式下,主要配置文件的重要参数功能及作用,本文所使用的Hadoop版本为2.6.4. etc/hadoop/core-site.xm ...

  3. 20155211 2016-2017-2《Java程序设计》课程总结

    20155211 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1:对师生关系的理解 预备作业2:熟能生巧及学习c语言的心的 预备作业3:关于假期 ...

  4. mycp 补交作业

    老师好:我昨天做完时已经是11点多了,错过了提交时间,希望用此篇博客弥补一下我的过失. import java.io.; import java.lang.; import java.util.Sca ...

  5. ubuntu装openVPN会遇到的问题

    与Windows系统相比,Linux下安装OpenVPN的过程就显得有点曲折. 如果你使用的是Ubuntu系统,你可以直接使用命令sudo apt-get install -y openvpn来安装O ...

  6. Zabbix学习之路(四)之Web监控

    1.Zabbix监控web服务器访问性能 zabbix 对 web 性能的监控,通过它可以了解 web 站点的可用性以及性能.最终将各项指标绘制到图形中,这样我们可以了解到一个站点的下载速度.响应速度 ...

  7. springboot 中controller 返回html界面或 jsp界面

    参考链接:https://blog.csdn.net/qq_15260315/article/details/80907056 经尝试,返回html界面没问题,但是返回jsp界面是有问题的,just ...

  8. hadoop 、hive 的一些使用经验。

    1.queue的设置 hadoop2.0支持了queue,在hadoop程序里面进行queue的配置: job.getConfiguration().set("mapred.job.queu ...

  9. 用Micro:bit做剪刀、石头、布游戏

    剪刀.石头.布游戏大家都玩过,今天我们用Micro:bit建一个剪刀.石头.布游戏! 第一步,起始 当你摇动它时,我们希望the micro:bit选择剪刀.石头.布.尝试创建一个on shake b ...

  10. JAVA验证码识别:基于jTessBoxEditorFX和Tesseract-OCR训练样本

    JAVA验证识别:基于jTessBoxEditorFX和Tesseract-OCR训练样本 工具准备: jTessBoxEditorFX下载:https://github.com/nguyenq/jT ...