Object                                   

1. Object是一个函数(typeof Object;//function)。Object构造器创建了一个对象包装器

 //Object{}
var o = new Object(null);
//Object{}
var o = new Object(defined);
//Number
var o = new Object(1);
//Boolean
var o = new Object(true);

2. Object.prototype属性是Object的原型对象

3. js中几乎所有objects都是Object的实例,一个object会继承Object.prototype的所有属性,这些属性也可能被屏蔽。

4. JavaScript没有子类对象,原型用于为某些表现为对象的函数创建一个“基类”对象

                                   Constructor                                   

Foo函数在声明时,Foo.prototype有一个默认属性.constructor,这个属性默认指向Foo

它不表示“由。。。构造”!

var a = new Foo();
a.constructor === Foo;//true
//a.__proto__ == Foo.prototype
//a.constructor被委托给Foo.prototype
//Foo.prototype.constructor默认为Foo

对象的constructor默认指向一个函数,这个函数可以通过对象的.prototype引用

                                   __proto__                                   

1. __proto__属性是个可访问的属性,它可以用来访问[[Prototype]]

2. __proto__的使用不被鼓励。它一开始并没有被包含在EcmaScript中,但是浏览器却一定要实现它。为了保证兼容性,未来将会在ECMAScript2015中规范并支持。

更推荐使用Object.getPrototypeOf/setPrototypeOf

3.__proto__ 的实现,get和set:

 Object.defineProperty(Object.prototype, "__proto__", {
get: function(){
return Object.getPrototyperOf(this);
},
set: function(o){
Object.setPrototypeOf(this, o);
return o;
}
});

                                   prototype                                   

1. 函数中有prototype对象,非函数没有prototype对象

2. 函数的prototype在new的时候起作用。让new func()出来的对象的__proto__指向func.prototype

3. 那没有自己设置prototype的函数的prototype是什么值?

function a(){}
//a.__proto__ -->function(){[native code]}
//a.constructor -->function Function{[native code]}
//a.prototype.__proto__ -->Object.prototype
//a.prototype.constructor --> a

                                   继承和原型链                                   

1. 继承:js只有一个构造器objects。每个object有一个私有属性[[Prototype]],它指向另一个对象,称为它的prototype对象。

2. prototype对象也有它的prototype对象,最后达到null。null没有prototype对象,因此它是原型链的最后节点

3. 原型链:当想要访问一个对象属性时,它从当前对象开始一直沿着它的原型向上访问,直到null

4. 基于原型链的继承

  • 继承属性
myObject.foo = "bar";

myObject有foo属性,修改foo的值(屏蔽原型链上的)

myObject无foo属性,沿myObject原型链向上查找,且原型链上有foo属性

    • 可写:在myObject添加foo属性(屏蔽原型链上的)
    • 不可写:语句被忽略/报错(严格模式)
    • 是setter:不改变
  • 继承方法

与继承属性类似

5. 创建对象的不同方法及原型链

 //1. 普通语法
//o --> Object.prototype
var o = {a:1};
//o --> Array.prototype -->Object.prototype
var o = [1, 2];
//f --> Function.prototype -->Object.prototype
function f(){
return 2;
} //2. new
function Graph(){
this.vertices = [];
this.edges = [];
}
Graph.prototype = {
addVertex: function(v){
this.vertices.push(v);
}
};
//g-->Graph.prototype--> Object.prototype
var g = new Graph(); //3. Object.create
//a-->Object.prototype
var a = {a:1};
//b-->a-->Object.prototype
var b = Object.create(a); //4. class关键字

6. 性能

  • 在原型链上查找属性比较耗时,试图访问不存在的属性时会遍历整个原型链
  • 遍历对象的属性时,原型链上的每个可枚举属性都会被枚举出来
  • hasOwnProperty是js中唯一一个只涉及对象自身属性而不会遍历原型链的方法
  • 仅判断值是否为undefined不足以检测一个属性是否存在,它可能存在而值恰好为undefined
var a = {
b: undefined
};
a.b;//undefined

7. 不好的实践:扩展原生对象的原型

         prototype和getPrototypeOf(__proto__)         

在函数中有一个属性prototype,它是和new操作符相关的特殊属性

在内存中创建一个对象,在运行函数前,会把[[prototype]]链接到函数的prototype

var o = new Foo();

等价于:

var o = new Object();
o.[[prototype]] = Foo.prototype;
Foo.call(o);
//返回o

总的来说:

prototype is for types, while Object.getPrototypeOf() is the same for instance

在prototype中定义的属性可以被new出来的对象共享

        我的总结吧~         

1. __proto__是每个对象都有的属性,用于访问对象的原型,形成原型链路

2. prototype是函数才有的属性,它在new的时候起作用。

var a = new A();//使得a.__proto__ = A.prototype

3. 为什么要在函数中加一个prototyp属性?(个人理解)

如果不加的话,只能有两种情况:a.__proto__ = A 或者a.__proto__ = A.__proto__

A是一个函数,而a希望是一个对象,这样会使得一个对象有函数的属性,这就不太合理了吧。

4. 与C++类的简单比较

C++ js
class A(){
  public:
A(){}
}
function A(){
}
A.prototype={
}
  • C++:定义一个类A,A中包括了一个构造函数A(),并封封装了需要的属性
  • js:定义一个function A(){},A有prototype属性,A.prototype中定义需要的属性
  • 所以,这两个的构造函数和封装属性的对象有点反过来的意思吧

5. constructor

function A(){}//定义一个函数
A.prototype.constructor == A;//true

下面图的关联关系是从chrome运行结果整理出来的

参考:

1. 《你不知道的javascript》上卷

2. MDN:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

最后,

不企图只看一篇文章然后懂得所有,还是要多翻几篇文章吧。

js——prototype、__proto__、constructor的更多相关文章

  1. Js中Prototype、__proto__、Constructor、Object、Function关系介绍

    一. Prototype.__proto__与Object.Function关系介绍 Function.Object:都是Js自带的函数对象.prototype,每一个函数对象都有一个显式的proto ...

  2. 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  3. js高级——构造函数,实例对象和原型对象——prototype、__proto__和constructor构造器

    一.前言 了解JavaScript面向对象,需要先了解三个名词: 构造函数,实例对象和原型对象. 注意:JavaScript中没有类(class)的概念,取而代之的是构造函数,两者类似却又有很大的差别 ...

  4. JS中的prototype、__proto__与constructor属性

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  5. JS中的prototype、__proto__与constructor

    1.前言 作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关 ...

  6. JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  7. 面向对象的程序设计(二)理解各种方法和属性typeof、instanceof、constructor、prototype、__proto__、isPrototypeOf、hasOwnProperty

    //理解各种方法和属性typeof.instanceof.constructor.prototype.__proto__.isPrototypeOf.hasOwnProperty. //1.typeo ...

  8. 原型链继承中的prototype、__proto__和constructor的关系

    前不久写了有关原型链中prototype.__proto__和constructor的关系的理解,这篇文章说说在原型链继承中的prototype.__proto__和constructor的关系. 通 ...

  9. JS的prototype和__proto__、constructor

    看了JS的prototype和__proto__这篇文章,才感觉很清晰了,对于原型这块,以前经常把这些属性弄不清楚, 明白了之后保存下整理下: prototype: 是函数的一个属性(每个函数都有一个 ...

  10. 【转】Js中Prototype、__proto__、Constructor、Object、Function关系介绍

    一    Prototype.__proto__与Object.Function关系介绍        Function.Object:Js自带的函数对象.         prototype,每一个 ...

随机推荐

  1. 二十一、Linux 进程与信号---进程资源限制

    21.1 进程资源限制 在操作系统中,我们能够通过函数getrlimit().setrlimit()分别获得.设置每个进程能够创建的各种系统资源的限制使用量. 21.1.1 函数 #include & ...

  2. java保留字

    //*********java保留字 //*********访问控制 private //私有 protected //受保护 public //公共 //*********类.方法和变量修饰符 ab ...

  3. Docker 网络设置

    一.Docker 网络默认使用的 Bridge 模式 默认生成为 docker0 :每个容器使用 veth 对,一头在容器的网络 namespace 中,一头在 docker0 上: 1.Docker ...

  4. Debian Security Advisory(Debian安全报告) DSA-4404-1 chromium

    Package : chromium CVE ID : CVE-2019-5786 Clement Lecigne在chromium的文件读取器实现中发现了一个use-after-free(释放后重用 ...

  5. Kali Linux之web安全扫描器skipfish使用

    0x00.skipfish简介 谷歌公司出品的开源web程序评估软件. skipfish特点:CPU资源占用低,扫描速度快,每秒可以轻松处理2000个请求,误报率低. 1x00.skipfish使用 ...

  6. Maven 那点事儿(转)

    0. 前言 Jason Van Zyl,在 Java 十大风云人物排行榜上或许会看到他. 这兄弟是干嘛的? 他就是 Maven 的创始人,人们都尊称他为“Maven 他爸”. 毋庸置疑,Jason 也 ...

  7. python面向对象和面向过程介绍与区别

    一.面向对象和面向过程的区别: a.面向过程: 1)根据业务逻辑从上到下写代码 2)开发思路是将数据和函数按照执行的逻辑顺序组织在一起 3)分开考虑数据与函数 定义性文字: 面向对象编程(Object ...

  8. NIO的epoll空轮询bug

    JDK NIO的bug,例如epoll bug,它会导致Selector空轮询,最终导致CPU 100%. Selector BUG出现的原因 若Selector的轮询结果为空,也没有wakeup或新 ...

  9. fastclick.js插件使用简单说明

    为什么存在延迟? 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作.     ...

  10. java 写 Excel(不生成实体文件,写为流的形式)

    java 写 Excel(不生成实体文件,写为流的形式) public String exportReportExcel(String mediaCode, List<SimpleMediaRe ...