Javascript 深入浅出原型

wpw 发布于2019-08-21 11:21 / 2650人阅读

摘要：重点实例对象是通过原型对象与构造函数取得联系的。原型链的形成是真正是靠的，而不是。函数对象和原型对象通过和属性进行相互关联。

JavaScript 使用 prototypal 原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。

个人博客排版更佳：https://haonancx.github.io/

先聊一聊对象的事情

JavaScript 中，万物皆对象！但对象也是有区别的，主要分为普通对象（Object）和函数对象（Function）。

说好的只聊技术，怎么聊上个人问题了！？

好了,安慰一下,请你吃下面这道菜！

function example(){};
var example2 = function(){};
var example3 = new Function("str","console.log(str)");

var other = {};
var other2 =new Object();
var other3 = new example();

console.log(typeof other); //object 下面检测一下他们都是些什么类型函数
console.log(typeof other2); //object
console.log(typeof other3); //object
console.log(typeof example); //function
console.log(typeof example2); //function
console.log(typeof example3); //function

怎么区分普通对象和函数对象呢？！其实很简单，凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象；所以 other、other2、other3 为普通对象，而 example、example2、example3 为函数对象。

在 JavaScript 中，每当定义一个函数对象时候，对象中都会包含一些预定义的属性（意思就是这个函数对象一旦被定义就必然会有这些属性）。

其中函数对象的一个属性就是原型对象 prototype；这个属性会指向函数的原型对象。

默认情况下每个原型对象又都会获取一个 constructor 属性，这个属性包含一个指向 prototype 属性所在函数的指针。

普通对象没有prototype,但有 _proto _属性。

让你现出"原型"

来来来,了解完对象,我们该开车上路了（老司机秒懂）

function Dogs(){
}
Dogs.prototype.name = "Collie";
Dogs.prototype.age = 3;
Dogs.prototype.DogsName = function(){
alert(this.name); 
};

var DogsA = new Dogs();
DogsA.DogsName();//"Collie"

上面的代码中，创建了一个 Dogs 函数，这时候它就会拥有一个 prototype 属性，这个属性指向了 Dogs Prototype 原型对象，而这个原型对象拥有一个 constructor (构造函数) 属性，其指针指向了 Dogs,就是 prototype 属性所在的函数 Dogs；当你创建一个对象实例（ DogsA，就是这条语句：var DogsA = new Dogs(); ）的时候，同样会拥有一个 prototype 属性；这个 prototype 属性会指向其原型对象，而不是直接指向其构造函数 Dogs。

重点：实例对象是通过原型对象与构造函数取得联系的。

原型链，老司机，深入一些！

JS 在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做 proto 的内置属性，用于指向创建它的函数对象的原型对象 prototype。

我们可以测试一下，以上面的代码为例：

console.log(DogsA._proto_ === Dogs.prototype) //true

同样，Dogs.prototype对象也有 _proto _ 属性，它指向创建它的函数对象（Object）的 prototype

  console.log(Dogs.prototype._proto_ === Object.prototype) //true

你瞧，证明了你 DogsA 是我 Dogs 实例化出来的对象出来的。

好了继续，Object.prototype对象也有 _proto _属性，但它比较特殊，为 NULL

  console.log(Object.prototype._proto_) //null

我们把这个有 proto 串起来，直到 Object.prototype.__proto_ _为 NULL 的链就叫做原型链。

总结

原型和原型链是 JS 实现继承的一种模型。

原型链的形成是真正是靠 _proto _ 的，而不是 prototype。

所有的原型对象都有 constructor 属性，该属性对应创建所有指向该原型的实例构造函数。

函数对象和原型对象通过 prototype 和 constructor 属性进行相互关联。

该文章部分知识网络整理

云服务器 GPU云服务器 javascript原型深入浅出javascript 深入javascript javascript深入

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

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

JavaScript深入之从原型到原型链

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

Songlcy 2019-08-21 15:32 评论0 收藏0
JavaScript深入之new的模拟实现

摘要：深入系列第十二篇，通过的模拟实现，带大家揭开使用获得构造函数实例的真相一句话介绍运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一也许有点难懂，我们在模拟之前，先看看实现了哪些功能。 JavaScript深入系列第十二篇，通过new的模拟实现，带大家揭开使用new获得构造函数实例的真相 new 一句话介绍 new: new 运算符创建一个用户定义的对象类型的实例或具...

tianlai 2019-08-20 16:17 评论0 收藏0
深入理解JavaScript

摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我...

myeveryheart 2019-08-22 13:46 评论0 收藏0
JavaScript深入之创建对象的多种方式以及优缺点

摘要：深入系列第十四篇，讲解创建对象的各种方式，以及优缺点。也就是说打着构造函数的幌子挂羊头卖狗肉，你看创建的实例使用都无法指向构造函数这样方法可以在特殊情况下使用。 JavaScript深入系列第十四篇，讲解创建对象的各种方式，以及优缺点。写在前面这篇文章讲解创建对象的各种方式，以及优缺点。但是注意：这篇文章更像是笔记，因为《JavaScript高级程序设计》写得真是太好了！ 1....

Terry_Tai 2019-08-21 11:40 评论0 收藏0
深入理解Javascript原型关系

摘要：如下所示在规范中，已经正式把属性添加到规范中也可以通过设置和获取对象的原型对象对象之间的关系可以用下图来表示但规范主要介绍了如何利用构造函数去构建原型关系。前言在软件工程中，代码重用的模式极为重要，因为他们可以显著地减少软件开发的成本。在那些主流的基于类的语言（比如Java,C++）中都是通过继承(extend)来实现代码复用，同时类继承引入了一套类型规范。而JavaScript是...

ethernet 2019-08-22 14:06 评论0 收藏0