javascript 之 prototype与proto

WrBug 发布于2019-08-22 15:40 / 1452人阅读

摘要：首先，先介绍一个今天的主角隐式原型与显式原型什么是和显式原型在每一个函数请注意是函数创建之后都会有一个叫的属性，这个属性指向的是函数的原型对象。最后总结一下对象有属性指向该对象的构造函数的原型对象。

首先，先介绍一个今天的主角：proto（隐式原型）与prototype（显式原型）

什么是__proto__和prototype？

prototype（显式原型）
在每一个函数（请注意是函数）创建之后都会有一个叫prototype的属性，这个属性指向的是函数的原型对象。

__proto__（隐式原型）
javascript 中任意对象都具有一个内置属性，在ES5之前并没有标准的方法访问这个属性，但是在绝大多数浏览器中都支持通过__proto__来访问这个属性，我们叫他隐式原型

prototype 和 __proto__之间的联系

首先我们来看一个例子：

 function Foo(){}

 var foo = new Foo();

 foo.__proto__ === Foo.prototype; //=>true

由上面我们可以看出函数foo的隐式原型指向其构造函数的显式原型.

通过这个我们能得出一个这样的结论么：
某对象（万物皆对象）.__proto__ === 其构造函数.prototype么，
答案是否定的，我们来看以下例子：

let obj = {name: "zarr"};
let sonObj = Object.create(obj);
console.log(sonObj.name); //=>zarr
console.log(sonObj.__proto__ === obj.prototype) //=>false
console.log(sonObj.__proto__ === obj) //=>true

ok，我们再看一个例子

var Obj = { a: 13 };
var obj = Object.create(Obj);
console.log(obj.a); //=>13
console.log(obj.__proto__ === Obj) //=>true

var Func = function () {
    this.a = "ds";
}

var func = Object.create(Func);
console.log(func.__proto__ === Func.prototype) //=>false
console.log(func.__proto__ === Func) //=>true
console.log(func.a) //undefined

不是说一个对象的隐式原型等于起构造函数的原型？为什么这个时候又等于这个构造函数了？
这就要分析一下Object.create的实现了，其实实现起来也不难，大家看下面

Object.create = function(obj){
     function f() {} 
     f.prototype = obj;
     return new f();
}

这下明朗了, 通过Object.create构造出的对象其实还是new出来的对象，比如上例的var func = Object.create(Func)； func.__proto__ === f.prototype === Func,
func.__proto__ === f.prototype这个还是成立的，但是由于函数f在调用完Object.create方法之后就被销毁了，所以只有func.__proto__ === Func。

ok,最后总结一下
1.对象有属性__proto__,指向该对象的构造函数的原型对象。
2.方法除了有属性__proto__,还有属性prototype，prototype指向该方法的原型对象。

idc机房托管混合云 javascript__ajax _javascript _JavaScript_API _JavaScript_MVC

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93650.html

JavaScript之原型与原型链

摘要：个人博客原文地址万物皆对象在中除值类型之外，其他的都是对象，为了说明这点，我们举几个例子我们可以使用来做类型判断除了属于值类型之外，其他都是对象。个人博客原文地址万物皆对象在JavaScript中除值类型之外，其他的都是对象，为了说明这点，我们举几个例子我们可以使用typeof来做类型判断 typeof a; // undefined typeof 1; ...

wuyangchun 2019-08-23 10:33 评论0 收藏0
深入学习js之——原型和原型链

摘要：我们用一张图表示构造函数和实例原型之间的关系好了构造函数和实例原型之间的关系我们已经梳理清楚了，那我们怎么表示实例与实例原型，也就是或者和之间的关系呢。开篇：在Brendan Eich大神为JavaScript设计面向对象系统的时候，借鉴了Self 和Smalltalk这两门基于原型的语言，之所以选择基于原型的面向对象系统，并不是因为时间匆忙，它设计起来相对简单，而是因为从一开始B...

FingerLiu 2019-08-23 15:25 评论0 收藏0
深入学习js之——原型和原型链

摘要：我们用一张图表示构造函数和实例原型之间的关系好了构造函数和实例原型之间的关系我们已经梳理清楚了，那我们怎么表示实例与实例原型，也就是或者和之间的关系呢。开篇：在Brendan Eich大神为JavaScript设计面向对象系统的时候，借鉴了Self 和Smalltalk这两门基于原型的语言，之所以选择基于原型的面向对象系统，并不是因为时间匆忙，它设计起来相对简单，而是因为从一开始B...

xialong 2019-08-23 15:04 评论0 收藏0
JavaScript深入之从原型到原型链

摘要：深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。让我们用一张图表示构造函数和实例原型之间的关系在这张图中我们用表示实例原型。 JavaScript深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。构造函数创建对象我们先...

Songlcy 2019-08-21 15:32 评论0 收藏0
Javascript重温OOP之原型与原型链

摘要：在构造函数中的中定义的属性和方法，会被创建的对象所继承下来。从上面的输出结果看出，指向了其构造函数的，而本身也是一个对象，其内部也有属性，其指向的是直到最后指向，这条原型链才结束。和都指向，说明原型链到终止。 prototype原型对象每个函数都有一个默认的prototype属性，其实际上还是一个对象，如果被用在继承中，姑且叫做原型对象。在构造函数中的prototype中定义的属性...

lindroid 2019-08-21 10:57 评论0 收藏0