js对象、原型的初步探讨（上）

xushaojieaaa 发布于2019-08-20 13:52 / 1193人阅读

摘要：经过我的试验，对象实例也就是创建的有名称有值不是虚的是具体的能拿来用的对象比如这样的和构造函数可以加原型，工厂函数不可以，其他的还没试，等下一篇文章再补充。

开这个专栏，是想记录下我学习的历程，埋之前走过的坑，整理下思路，或许也还可以帮助到其他人。
然而从创建到现在，每次想写些东西，打开专栏，先写几句扯皮的话，然后呆坐半个小时，发现自己还有很多没有弄懂的地方，于是关掉网页，草稿都不要了。
就这样连续废了三次。终于今天听老师讲了对象原型，之前看书看出来的种种疑惑稍微明朗，赶紧记录下来先，不管对错与否，不然又要鸽。以下纯属个人理解，如有误请指正~

要开始了哦

首先是对象的声明。
我们都知道，没有对象是非常不好的，要有对象，首先要相亲声明一个变量。这里列举三个比较常用的声明方式。

1、直接创建：

var obj = new Object();
    obj.属性名 = 值;
    obj.方法名 = function(){就是函数的写法}

或者

var obj = {}；
    obj.属性名 = 值;
    obj.方法名 = function(){还是函数的写法}

或者直接在{}里面加

var obj = {属性名1：值,属性名2：值,方法名：function(){这里不讲函数怎么写}}
    //格式为{}括起来，名字和值用“：”隔开，各个属性用“，”隔开
    //当然可以在外面继续加属性
    obj.属性名N = 值;

ok，应该没什么错误吧~~没检查心虚~~

2、工厂模式
第一次见到这个这个名字，心里想的是：这是什么鬼名字！
然而一天后我就接受了……
具体来说，是在函数中创建一个对象，然后把这个对象作为返回值赋值就好了。
比如说

function createObj(name,value){    //写个函数，把声明挑出来
    var obj = new Object();        //要用到new Object();
    obj.name = name;
    obj.value = value;
    obj.方法名 = function(){函数的写法}
    return obj;                    //把创建的obj作为返回值
}
var objName = createObj(参数1，参数2);

应该是这样写吧，var objName = new createObj(1,2);少个new或多个new貌似无影响。

这样写的好处是可以多次调用，不用每次都写一串的值了。然而！有个问题是，无法应用原型的属性（至少我现在还没发现有方法能用，等啥时候能用了再补~~怀疑态度~~）

3、构造函数
这个方法是我最喜欢的方法，既可以用原型，看起来也舒服简便。通过与原型的配合使用，还可以形成大家说的第四种方法混合模式白眼，然而我不想分那么细，就这么一块说了吧！
因为构造函数纯粹是为了定义对象的，于是它一定会指向一个对象（要是非要把它当函数用我也木得刚），于是可以用this这个神奇的字符来指向调用它的对象，也就是我们想要创建的对象！~~好绕口~~
具体来说，是这样的：

function CreateObj(name,value){ //也可以不传参数，创建了后再赋值，可那样多麻烦啊
    this.name = name;
    this.value = value;
    this.方法 = function(){又是一个函数}
}
var objName = new CreateObj();
    //权威指南上说，通常把前面要用new的函数命名为第一个首字母大写，方便辨识
    //这个习惯是要推荐的

差不多就这样，接下来将原型，第四种第五种创建方法暂时不表~

原型的个人理解

前方口胡高能，望大神指正！
我觉得，原型这个词翻译的不是很好，以我对字面上的理解，“原型”嘛，像初号机那样，要先于后面量产的机型出现，然后量产机仿照原型来制造，也导致量产机根本就是渣，一点进步都没有，最后还得靠初号机来收人头（大雾）。
然而实际上在js里，原型并不是要先声明，也不必独立出来，甚至相反，它存在于对象“里面”。
“原型”实际上是指各个对象之间通用的部分，“公共对象”、“通用对象”、“公用部分”、“通用部分”之类的词可能会更好些~~个人理解~~。
也就是说，如果设置了原型，相同原型的对象就有了共同的部分。
既然是对象的一部分，那原型是一个对象（对象的一部分还是对象嘛，不过要先创建）。
经过我的试验，对象实例（也就是创建的有名称有值不是虚的是具体的能拿来用的对象比如obj1={value:1}这样的）和构造函数可以加原型，工厂函数不可以，其他的还没试，等下一篇文章再补充。
添加原型的方法是用prototype这个词（找不到形容这个词的概念了，方法、变量什么的太容易引起混淆，就用这个词吧！），这个prototype是一个对象……吧应该，我理解的是，它是对象中的对象。
用个例子来演示一下原型的好处，用构造函数为例：

function CreateObj(name,value){    //先写个构造函数压压惊
    this.name = name;
    this.value = value;
    this.方法 = function(){因为我懒不想写函数好吧，想名字很难的}
}
var obj1 = new CreateObj("第一个",1);    //用构造函数创建一个对象
var obj2 = new CreateObj("第二个",1);    //用构造函数创建另一个对象

这样我们就获得了两个对象实例
那么现在问题来了，我们在之后的编码过程中，发现他们有共同的属性value，而且这两个值总是相等的，好在我们现在只有两个，要修改起来还算容易。

obj1.value = 2;
obj2.value = 2;

再后来，我们创建了好多好多的对象，他们都有个value值，而且都相等

var obj3 = new CreateObj("第三个",2);
var obj4 = new CreateObj("第四个",2);
var obj5 = new CreateObj("第五个",2);
…………………………
var objn = new CreateObj("第n个",2);

我们想改一下他们的value这个属性，由于创建的太多了，改起来简直是个灾难~~只要功夫深铁杵磨成针~~
于是为了应对这种情况发生，把value设置成通用的属性不就好了！由于大家都是调用的CreateObj这个构造函数（这里构造函数的好处就显现了，工厂模式无法添加原型！），那就给CreateObj这个函数添加个原型（通用属性），以后大家调用的时候，就能有个通用的属性了！重新写是这样的：

function CreateObj(name){        //构建函数
    this.name = name;
}
CreateObj.prototype = {value:1};        
//之前说过，prototype是个对象，对象的创建方式是怎样，它就能怎么写（吧……）
var obj1 = new CreateObj("第一个");
var obj2 = new CreateObj("第二个");
.......
var objn = new CreateObj("第n个")；

    //objn.value 有值了

这么一来，我们就可以直接修改这么多对象的通用部分了，通过修改

CreateObj.prototype.value = 2;

来修改所有对象的value值，是不是很爽！

先写这么多，还有继承等内容，容我再研究研究，纯属个人理解，如有误请及时指正！也是在帮助我~谢谢您的支持！

GPU云服务器云服务器 js原型链的继承数据分析的探讨计算机的初步学习 js原型面试题

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

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

JavaScript的创世神话——一切源于对象

摘要：但是，中并没有类的概念，而是通过构造函数替代了类的功能，为某一类的对象提供共同的属性和方法。一只名叫的狗，首先继承了构造函数的原型对象，而的原型对象中的有继承了函数的原型对象，函数对象中的有继承了的原型对象。《圣经》里的第一章创世纪中其中有一段经典记载上帝是如何创造人的。神说：我们要照着我们的形象，按照我们的样式造人。不谋而合的是，JavaScript中似乎也遵循着上帝的旨意去创造程...

enda 2019-08-22 10:50 评论0 收藏0
原型链一：原型与原型链

摘要：说白了，原型就是构造函数用来构造新实例的模板对象。什么是原型链先回答什么是原型。例如这个原型的原型就是这个构造函数的，既这个原型对象。这些原型对象通过像链子一样连起来，就叫做原型链。原型链初步学习这篇博客只是我初步理解原型链的一个个人学习笔记,写的比较粗略,且有的地方可能理解错误. 更多更专业的关于原型链的解释请看JavaScript深入之从原型到原型链和阮一峰的博客:Javas...

MudOnTire 2019-08-22 17:04 评论0 收藏0
初步学习 jQuery 核心 API

摘要：进一步了解类数组对象可以看这篇文章对象的构建和分离构造器然后我们回来看看，让我们悲伤的代码。。。然后又通过下面的语句，将两个独立的构造器关联起来了。背景不造轮子的程序员不是好程序员，所以我们今天尝试造一下轮子。今天的主角是 jQuery ，虽然现在市面上已被 React，Angular，Vue 等挤的容不下它的位置，但是它的简单 API 设计依然优秀，值得学习和体会。任务今天造...

张巨伟 2019-08-20 19:01 评论0 收藏0
JavaScript面向对象的程序设计

摘要：目录导语理解对象和面向对象的程序设计创建对象的方式的继承机制原型对象原型链与原型对象相关的方法小结导语前面的系列文章，基本把的核心知识点的基本语法标准库等章节讲解完本章开始进入核心知识点的高级部分面向对象的程序设计，这一部分的内容将会对对象目录导语 1.理解对象和面向对象的程序设计 2.创建对象的方式 3.JavaScript的继承机制 3.1 原型对象 3.2 原型链 3.3 与...

gitmilk 2019-08-20 13:30 评论0 收藏0
揭开JS中constructor的秘密

摘要：学习原型与继承的时候，经常会碰到，现在来揭开神秘面纱描述所有对象都会从它的原型上继承一个属性继承中的用于设置原型重新分配原始构造函数现在不手动重置构造函数用于设置原型重新分配原始构造函数可以看到除了的不同，重置不重置原始构造函数对我们的继承学习js原型与继承的时候，经常会碰到constructor，现在来揭开神秘面纱描述：所有对象都会从它的原型上继承一个 constructor 属...

MorePainMoreGain 2019-08-23 16:58 评论0 收藏0