__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. 简单竖向Tab选项卡

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. Java 小型学生管理系统心得

    这个学生管理系统相对来说比较简单,主要就是复习下java怎么连接数据库,然后你怎么来实现这个功能,我简单的说下思路吧. 首先你要构思好这个界面,他包括增删查改这些基本功能,然后你去分析这些功能都能怎么 ...

  3. springMVC如何判断入参是默认参数还是请求传过来的参数?

    springMVC如何判断入参是默认参数还是请求传过来的参数?

  4. gradle命令

    gradle tasks 可以显示gradle可以做的任务. gradle build 就会生成jar包. build和clean install的作用是否一致?

  5. 查询oracle表和sql数据量大小

    select t.TABLE_NAME,t.NUM_ROWS from user_tables t order by t.TABLE_NAME:--oracle  SELECT object_name ...

  6. mysql 自带全文检索

    对于一些简单的检索可以通过mysql自带的全文索引及 MATCH AGAINST 查询语句实现.实验步骤如下.1.建表DROP table IF exists con_video_file_des_t ...

  7. iOS SearchBar为什么跳不出来第三方输入法

    去掉键盘类型就好了 // lineSearchBar.keyboardType = UIKeyboardTypeNamePhonePad;

  8. access 2007 vba 开发中学到的知识(二)

    文件的导入和导出 excel 'excel导入Private Sub btnInExcel_Click() Dim strSelectFile As StringWith Application.Fi ...

  9. javascript 广告移动特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  10. Leetcode 371: Sum of Two Integers(使用位运算实现)

    题目是:Calculate the sum of two integers a and b, but you are not allowed to use the operator + and -. ...