理解javascript中的原型

gaara 发布于2019-08-21 11:28 / 2998人阅读

摘要：构造函数和原型同时存在同一方法，结果会是哪个呢构造函数的方法优先会先在构造函数中找，如果没有在去查找原型，如果原型还没有那返回原型和实例不是复制关系，而是协同关系，附加到了新创建的对象上未完待续

已经熟悉Javascript的开发者可能会认为原型和对象的关系很亲密，但是这全都与函数有关，原型虽然是定义对象的一种很方便的方式，但是它的本质依然是函数特性。
作为Javascript中的一个方便方式，使用原型所定义的属性会变成实例化对象的属性，从而作为复杂对象创建的概览。
所有函数在初始化的时候都有一个prototype属性，该属性的初始值是一个空对象，只有函数在作为构造器(constructor)的时候，prototype属性才会返回更大的作用，使用new关键字调用一个函数，使得该函数可以作为构造器进行实例化，并产生一个新的空对象实例作为其上下文
上面看不懂没关系下面我们就用几个例子来理解一下原型

对象实例化

创建新对象最简单的方法只有一条语句

var o = {};//并可以为他添加一些属性
o.name = "Li li";//添加name属性
o.age = "28";    //添加age属性
o.skill = "english";//添加skill属性
//也可以如下面这样写
var o {
o.name = "Li li";
o.age = "28";
o.skill = "english";
}

上面我们演示了如何创建一个对象并为之添加三个属性，那么如果我们要创建多个相同类型的对象实例，分别对属性进行赋值，不仅代码冗长，还非常容易出错。此处下面在说

原型作为对象概览

我们先开看代码

function Person () {}
Person.prototype.dance = function () {
 return true
}
var person = new Person;
console.log(person.dance())//true

让我们看看发生了什么？使用new操作符将其作为构造器进行调用，构造函数被调用，并且新创建了一个对象也就是他的实例，新创建的函数成了构造函数的上下文，new操作符返回的结果就是对新创建的对象的引用

实例属性

使用new操作符将函数作为构造器进行调用的时候，其上下文被定义新对象实例，意味着除了通过原型给附加属性的形式意外，我们还可以在构造函数内通过this参数初始化值。

function Person () {
 this.swing = false;//false
 this.isSwing = function()
 {return !this.swing}//true
Person.prototype .isSwing = function(){
return this.swing
}
var person = new Person;
console.log(person.swing)
//构造函数和原型同时存在同一方法，结果会是哪个呢？构造函数的方法优先！person会先在构造函数中找swing，如果没有在去查找原型，如果原型还没有那返回undifined
原型和实例不是复制关系，而是协同关系！，附加到了新创建的对象上

未完待续！

GPU云服务器云服务器 javascript原型 javascript理解如何理解javascript 深入理解javascript

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

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

理解JavaScript的核心知识点：原型

摘要：首先，需要来理清一些基础的计算机编程概念编程哲学与设计模式计算机编程理念源自于对现实抽象的哲学思考，面向对象编程是其一种思维方式，与它并驾齐驱的是另外两种思路过程式和函数式编程。 JavaScript 中的原型机制一直以来都被众多开发者（包括本人）低估甚至忽视了，这是因为绝大多数人没有想要深刻理解这个机制的内涵，以及越来越多的开发者缺乏计算机编程相关的基础知识。对于这样的开发者来说 J...

iKcamp 2019-08-23 18:34 评论0 收藏0
面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0
深入理解Javascript原型关系

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

ethernet 2019-08-22 14:06 评论0 收藏0
JavaScript 原型中的哲学思想

摘要：而作为构造函数，需要有个属性用来作为以该构造函数创造的实例的继承。欢迎来我的博客阅读：「JavaScript 原型中的哲学思想」记得当年初试前端的时候，学习JavaScript过程中，原型问题一直让我疑惑许久，那时候捧着那本著名的红皮书，看到有关原型的讲解时，总是心存疑虑。当在JavaScript世界中走过不少旅程之后，再次萌发起研究这部分知识的欲望，翻阅了不少书籍和资料，才搞懂...

sugarmo 2019-08-19 18:38 评论0 收藏0
你是否理解js的Object与Function与原型链

摘要：原型对象是由创建的，因此原型对象的构造函数是构造函数也可以是称为对象，原型对象也就继承了其生父构造函数中的数据，也同时继承了原型对象的数据。当然这条原型链中的数据，会被还是还是这类构造函数继承，但是不会被这些继承，他们不处于同一个链条上。 js中，Function的本质是什么？Object的本质又是什么？js中有几条原型链？ showImg(https://segmentfault.c...

itvincent 2019-08-20 17:51 评论0 收藏0