javascript原型对象、原型链、构造函数

1、原型对象（原型）、原型链

　　先放一张在网上看到的关于原型和原型链的图，非常不错。

　　如果你能看懂，那就对原型链有了一定了解，如果看不懂，对照下面这几点来看图：

js中所有函数都有一个prototype属性，这个属性引用了一个对象（fun.prototype），即原型对象，也简称为原型（下面都称原型）
所有原型都有constructor属性和__proto__属性
constructor属性指向原函数（方法）
__proto__属性指向自己的继承父类（即它的构造函数的原型）
第四点得到的结果，又回到了第二点，这样就构成了原型链。
js中一切皆对象，而对象都有一个__proto__属性，这也解释了原型为什么有这个属性。
Object.prototype的_proto_指向null（最顶级的原型对象），所有原型链的最顶层都是Object.prototype
补充：
1. instanceof 运算符：A instanceof B 检查 A的原型链上是否存在B.prototype。
```
console.log([1,2,3] instanceof Array);        // true
console.log([1,2,3] instanceof Object);       // true
```
  深入了解instanceof ： JavaScript instanceof 运算符深入剖析
2. Function是最顶层的构造方法，所有对象都由Function方法构造，包括Object方法，Function方法。
```
console.log(Object instanceof Function); 　　　　                   //true
```
```
console.log(Function instanceof Function); 　　//true
```
  （上图可以看出三个函数对象的__proto__都指向了Function.prototype）
3. Object对象和Function方法是相互依赖的
```
alert(Function instanceof Object);                                // true
```
  和2对比，可以看出。
4. 原型链只有在检索值的时候才会用到，如果我们尝试去获取对象的某个属性值，但该对象没有此属性值，那么js就会在其原型对象中找，如果还没有，那么再从它的原型中找，直到Object.prototype，如果该对象原型链中也没有找到，则返回undefined。

　　　Object.create方法

　　　　内部原理：

　　　　 if(typeof Object.beget !== 'function') {Object.create = function(o) {var F = function () {};F.prototype = o;return new F();}}

　　这个方法创建一个使用原对象作为其原型的新对象。

　　　　 var obj = {'a': 'a','b': 'b'}var obj1 = Object.create(obj);obj1.__proto__.c = 'c';　　　　　console.log(obj);　　　　　　　　　　　　// {a:'a',b:'b',c:'c'}　　　　可以看出obj1使用obj作为其构造函数原型

　　用途：在工厂函数中，将相同的属性和方法放在构造函数的原型链中，不同的放在构造函数中。

2、构造函数

function Foo() {}
var foo = new Foo();

　　1、构造函数也是函数，未了区分，构造函数的函数名首字母大写。（不是必须，但最好）

　　2、new的内部实现原理：（建议理解原型和原型链，在返回来看这个）

       var foo = {};foo.__proto__ = Foo.prototype;Foo.call(foo);

　　通过上面的代码可以看出：通过实例化构造函数，所生成的对象，它的继承父类（foo.__proto__）就是构造函数的原型（Foo.prototype）。

function Foo () {this.a = 'a';this.b = 'b';
}
var obj1 = new Foo();
var obj2 = {a: 'a',b: 'b'
}
console.log(‘obj1的构造函数是： ’ + obj1.__proto__.constructor);　　　　　　　　// obj1的构造函数是： function Foo () { this.a = 'a'; this.b = 'b';}

console.log(‘obj2的构造函数是： ’ + obj2.__proto__.constructor);　　　　　　　　// obj2的构造函数是： function Object() { [native code] }

我的博客

转载于:https://www.cnblogs.com/seeks/p/7724444.html

javascript原型对象、原型链、构造函数相关推荐

ES6 （二十二）Class 的继承、extends关键字、super 关键字（函数调用（constructor）、对象（父类原型对象））、原型对象(原型链)、Mixin 模式
ES6 (二十二)Class 的继承.extends关键字.super 关键字(函数调用(constructor).对象(父类原型对象)).原型对象(原型链).Mixin 模式文章目录 ES6 (二 ...
JavaScript(八)——对象原型
通过原型这种机制,JavaScript 中的对象从其他对象继承功能特性:这种继承机制与经典的面向对象编程语言的继承机制不同.本文将探讨这些差别,解释原型链如何工作,并了解如何通过 prototype ...
JavaScript进阶-编程思想、构造函数的原型对象、对象原型、原型继承以及原型链
编程思想面向过程面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了. 优点: 性能比面向对象高,适合跟硬件联系很紧密的东西,例如单 ...
深入理解Javascript中构造函数和原型对象的区别
在 Javascript中prototype属性的详解这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...
JavaScript原型对象与原型链
JavaScript原型对象与原型链在JavaScript实际项目中,对象是十分重要的一种类型无论是作为数据表现的一种形式或配置成工厂模式制造实例等等,这些用途在实际项目开发中都使用得非常广泛依 ...
javascript面向对象系列第一篇——构造函数和原型对象
前面的话一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如何用构造函数和原型对象来创建对象构造函数构造函数是 ...
【javascript】对原型对象、原型链的理解
原型对象,原型链这些知识属于基础类知识.但是平时开发过程中也很少用到. 看网上的意思,原型链用于es5开发场景下的继承.es6有了类语法糖之后,就自带继承了. 通过理解,个人画了一张原型链解构的关系图 ...
（转）【javascript基础】原型与原型链
原文地址:http://www.cnblogs.com/allenxing/p/3527654.html 前言原型是什么理解原型对象原型对象 isPrototypeOf hasOwnProper ...
JavaScript高级day02-AM【函数的prototype、显式原型与隐式原型、原型链】
笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目录 P15 15.尚硅谷_JS高级_函数的prototype 15:04 1. 函数 ...
关于javascript的原型和原型链，看我就够了（二）
温故创建对象的三种方式通过对象直接量通过new创建对象通过Object.create() js中对象分为两种函数对象普通对象仔细观察如下代码 function Foo(name) {th ...

javascript原型对象、原型链、构造函数

1、原型对象（原型）、原型链

2、构造函数

javascript原型对象、原型链、构造函数相关推荐

最新文章

热门文章