__proto__ 用来获取和设置对象原型,但它是非标准的。__proto__前后的双下划线,说明它本质上是一个内部属性,而不是一个正式的对外的API,只是由于浏览器广泛支持,才被加入了ES6。标准明确规定,只有浏览器必须部署这个属性,其他运行环境不一定需要部署,而且新的代码最好认为这个属性是不存在的。因此,无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,而是使用下面的Object.setPrototypeOf()(写操作)、Object.getPrototypeOf()(读操作)、Object.create()(生成操作)代替。

创建对象的各种方式 对其原型链的影响

  1. var o = {a: 1};
  1. Object.getPrototypeOf(o) === Object.prototype //true
  1. // o ---> Object.prototype ---> null
  2.  
  3. var a = ["yo", "whadup", "?"];
  4. // a ---> Array.prototype ---> Object.prototype ---> null
  5.  
  6. function f(){
  7. return 2;
  8. }
  9. // f ---> Function.prototype ---> Object.prototype ---> null

普通对象 o 的原型 指向 Object对象的prototype属性。

数组对象 a 的原型 指向 Array对象的prototype属性。 而 Array对象的 prototype属性也是对象,它的原型 指向 Object.prototype属性。

函数f 的原型 指向 Function对象的prototype属性。

  1. function Graph() {
  2. this.vertices = [];
  3. this.edges = [];
  4. }
  5.  
  6. Graph.prototype = {
  7. addVertex: function(v){
  8. this.vertices.push(v);
  9. }
  10. };
  11.  
  12. var g = new Graph();
  1. var r = Object.getPrototypeOf(g) === Graph.prototype ; // true
    var s =Object.getPrototypeOf(g) === Graph ; // false

使用new 关键字来创建对象。对象g 的原型指向 Graph.prototype。 (注意区别g的原型指向 Graph )

  1. var a = {a: 1};
  2. // a ---> Object.prototype ---> null
  3.  
  4. var b = Object.create(a);
  5. // b ---> a ---> Object.prototype ---> null
  1. var r = Object.getPrototypeOf(b) === a.prototype ;
    var s =Object.getPrototypeOf(b) === a ;console.log(b.a); // 1 (inherited)

  1. var c = Object.create(b);
  2. // c ---> b ---> a ---> Object.prototype ---> null
  3. var d = Object.create(null);
  4. // d ---> null
  5. console.log(d.hasOwnProperty);

使用Object.create来创建对象,b的原型指向了a ,(注意不是a.prototype)

  1. class Polygon {
  2. constructor(height, width) {
  3. this.height = height;
  4. this.width = width;
  5. }
  6. }
  7.  
  8. class Square extends Polygon {
  9. constructor(sideLength) {
  10. super(sideLength, sideLength);
  11. }
  12. get area() {
  13. return this.height * this.width;
  14. }
  15. set sideLength(newLength) {
  16. this.height = newLength;
  17. this.width = newLength;
  18. }
  19. }
  20.  
  21. var sq = new Square(2);

使用class 创建对象sq 的原型指向Square.prototype ,  而 子类Square 的原型 指向父类 Polygon (注意不是Polygon.prototype)

参考链接:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

JavaScript 原型与原型链的更多相关文章

  1. JavaScript继承与原型链

    对于那些熟悉基于类的面向对象语言(Java 或者 C++)的开发者来说,JavaScript 的语法是比较怪异的,这是由于 JavaScript 是一门动态语言,而且它没有类的概念( ES6 新增了c ...

  2. 【javascript基础】4、原型与原型链

    前言 荒废了好几天,在宿舍闷了几天了,一直想着回家放松,什么也没搞,论文就让老师催吧.不过,闲的没事干的感觉真是不好,还是看看书,写写博客吧,今天和大家说说函数的原型. 原型是什么 第一次看到这个的时 ...

  3. 【JavaScript】深入理解JavaScript之强大的原型和原型链

    由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...

  4. Javascript 原型和原型链

    先来了解一下Javascript中的原型:”原型也是一个对象,原型可以用来实现继承...“ 对于 原型,构造函数,以及实例之间的关系:“每个(构造)函数都有一个原型属性,原型对象都包含一个指向构造函数 ...

  5. javascript 原型 和 原型链

    最近几天,好些新同事来问原型,原型链啥的.本身作为菜鸟的我好像也没有好好整理过这个,这里写写自己的理解. 原型 大家都知道,JavaScript 不包含传统的类继承模型,而是使用 prototype ...

  6. JavaScript深入之从原型到原型链(本文转载)

    JavaScript深入之从原型到原型链(本文转载) https://github.com/mqyqingfeng/Blog.原文地址 构造函数创建对象 我们先使用构造函数创建一个对象: functi ...

  7. javascript 之原型、原型链-14

    原型 原型是一个对象,每个函数对象(在javascript 之对象中说过函数也是对象 )都有一个属性(prototype)指向这个对象--原型对象,这个对象的作用是让所有对象实例共享原型对象中的属性. ...

  8. JavaScript原型与原型链

    一.数据类型 JavaScript的数据类型可以分为基本数据类型和引用数据类型. 基本数据类型(6种) String Number Boolean null undefined Symbol(ES6) ...

  9. JavaScript prototype原型和原型链详解

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...

  10. 对Javascript 类、原型链、继承的理解

    一.序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...

随机推荐

  1. ifconfig命令详解

    linux下网上命名规律:eth0,eth1.第一块以太网卡,第二块.lo为环回接口,它的IP地址固定为127.0.0.1,掩码8位.它代表你的机器本身. 1.ifconfig是查看网卡的信息 eth ...

  2. 矩阵快速幂(入门) 学习笔记hdu1005, hdu1575, hdu1757

    矩阵快速幂是基于普通的快速幂的一种扩展,如果不知道的快速幂的请参见http://www.cnblogs.com/Howe-Young/p/4097277.html.二进制这个东西太神奇了,好多优秀的算 ...

  3. Tomcat相关目录及配置文件总结

    Tomcat根目录介绍      [bin]目录主要是用来存放tomcat的命令,主要有两大类,一类是以.sh结尾的(linux命令),另一类是以.bat结尾的(windows命令). 很多环境变量的 ...

  4. mongodb的地理空间索引常见的问题

    创建地理空间索引注意事项 创建地理空间索引失败,提示错误信息如下 > db.places.ensureIndex({"loc":"2dsphere"}){ ...

  5. asp.net+Sqlserver 通过存储过程读取数据

    Sqlserver代码  创建存储过程如下: /*根据父id获取类别总数*/ IF EXISTS (SELECT name FROM sysobjects WHERE name = N'getsite ...

  6. discuznt学习笔记

    DBWR=DbHelper(client)   Discuz.Data部分 DbHelper相当与抽象工厂中的Client,其中定义了需要与数据库进行操作的通用方法(如ExecuteScalar,Fi ...

  7. VS2013 编译 MySql Connector C 6.1.6

    1.下载cmake http://cmake.org/ 2.下载最新版MySql Connector C http://www.mysql.com 3.命令行下,转到源代码目录下,"cmak ...

  8. VS2010 IE10 调试时报“未能将脚本调试器附加到计算机”,已经附加了一个进程

    解决办法:以管理员身份打开CMD,运行:regsvr32.exe "%ProgramFiles(x86)%\Common Files\Microsoft Shared\VS7Debug\ms ...

  9. C#操作Excel文件(转)

    摘要:本文介绍了Excel对象.C#中的受管代码和非受管代码,并介绍了COM组件在.net环境中的使用. 关键词:受管代码:非受管代码:Excel对象:动态连接库 引言 Excel是微软公司办公自动化 ...

  10. 【回忆1314】第一次用AngularJS

    1.创建指令的4种方式(ECMA) var appModule = angular.module('app', []); appModule.directive('hello', function() ...