javascript对象不完全探索记录03：小伙子，你对象咋来的？上篇

Pluser 发布于2019-08-22 11:15 / 2393人阅读

摘要：看着别人写的功能对，就直接拿过来用，写出来的代码臃肿到爆炸，满屏幕的的初级使用方式，运气好了能凑合跑起来，出了问题全脸懵逼，心中安慰自己一万遍我可是干设计的，但是既然打算好好整下就得从头开始看了。

温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命

首先，说实话，我对不起javascript，作为一个接触前端快10年的老前端(伪)，一直发扬的是不求甚解的拿来就用主义。
看着别人写的功能对，就直接拿过来用，写出来的代码臃肿到爆炸，满屏幕的jquery的初级使用方式，运气好了能凑合跑起来，出了问题全脸懵逼，心中安慰自己一万遍我可是干设计的，但是既然打算好好整下js就得从头开始看了。

希望能够从源头制止一些错误的发生

既然从头来，那我就来重新审视一下面相对象程序基础的基础：创建对象
于是又看了成吨博文
JavaScript中的对象，如何创建对象，创建对象的7种模式 - 旗smile
JS中创建对象的几种常用方法 - ifcode
ECMAScript 定义类或对象 - w3school(深度好文，强烈推荐)

我对象亲手写出来的

没有对象，自己造一个不就好了  --某资深黑魔法师前辈程序员

这是最简单的创造对象的方式，简单到只有一句话

var girlFriend = {};

搓搓手，下一步我们给她添加些属性和方法，让她看上去更真实(有意义)

girlFriend.name = "REI"；
girlFriend.moeType = "silent";
girlFriend.hairColor = "blue";
girlFriend.sayHello = function(){
    return "..."
}

我们也可以用一种更直接可读性更强的方式来创建

var girlFriend = {
    name : "REI",
    moeType : "silent",
    hairColor : "blue",
    sayHello : function(){
        return "..."
    }
}

至此一个相对完整的对象就创建出来了，我们可以随意的查看她的内部属性调用其内部方法

console.log(girlFriend.name)//REI
console.log(girlFriend.sayHello)//...

这种方式的优点在于简单直接，便于理解，缺点在于只能创建单个对象(你还想怎样)，往往在我们的应用／后宫中，需要创造多个实例对象，这也就是面向对象／后宫漫的意义不是吗

我对象批量生成的

对于上面那个危险的想法，我们的思路是如果生成对象，能像执行函数那样，传入不同的参数自动生成不通的实例对象，哪岂不是十分方便，而事实上我们也是这么做的
最简单的想法，就是将我们上面的方法封装成一个函数

function GirlFriend(name,moeType,hairColor){
    var girlFriend = {};
    girlFriend.name = name;
    girlFriend.moeType = moeType;
    girlFriend.hairColor = hairColor;
    girlFriend.sayHello = function(){
        return moeType == "silent"?"..." : "Ohayo!"
    }
    return girlFriend;
}
var rei = GirlFriend("Rei","silent","blue");
var asuka = GirlFriend("Atsuka","genki","red");
console.log(rei.sayHello());//...
console.log(asuka.sayHello());//Ohayo!

结果如果我们所见，我们创建了两个不同的对象实体，她们有着相同的属性名称但是确有不同的属性值，这就是坊间所说的工厂模式
回头想想虽然我们成功的创建了两个对象实例，但是这两个对象是无法被作为girlFriend对象来识别的，因为她们本就是在一个函数内部执行的过程中被创造出来的，之间并不存在什么联系，这在开发中并不利于我们追根溯源，不信我们来看看

console.log(rei instanceof GirlFriend);//false

整这么半天，生成的Rei根本就不是girlFriend，只是看上去像而已／复制品

那我们换一种思路，既然js中函数皆对象，能不能有这么一个函数／对象，他本身可以传入参数，然后以他本身为模版创造出相同类型的实例对象呢，js中就提供了一种特殊的函数，叫做构造函数，他的任务就是根据我们的要求／传的参数，创造出和自己类型相同的的对象，而这种创建方法这就是坊间传说的构造函数法

GirlFriend = function(name, moeType, hairColor) {
    this.name = name;
    this.moeType = moeType;
    this.hairColor = hairColor;
    this.sayHello = function() {
        return moeType == "silent" ? "..." : "Ohayo!"
    }
}

这就是一个构造函数了，对他的使用就如同我们在调用许多被封装好的js库一样，其实都是按照自己的需求实例化js库作者提前定义好的对象（这只是一个说话，构造函数中并没有对象）
具体的方法如下

var rei = new GirlFriend("Rei", "silent", "blue");
var asuka = new GirlFriend("Atsuka", "genki", "red");
console.log(rei.sayHello());//...
console.log(asuka.sayHello());//Ohayo!

构造函数是一种特殊的函数，需要配合new来使用，在使用new运算符时执行了以下步骤

1.创建一个新的对象
2.将构造函数作用域赋给新的对象（即this指向新对象，只有通过this才能访问）
3.执行构造函数里面的代码
4.返回新的对象
部分引自js工厂模式、构造函数以及他们创建对象的优缺点？— 第6.2.1节 - flyingpig2016

回过头来检查以下

console.log(rei instanceof GirlFriend);//true
console.log(asuka instanceof GirlFriend);//true

这回ok了，Rei和Asuka妥妥的都是girlFriend了

当然，这种创建模式，还存在一些问题，并且还有其他的创建模式，放在下一篇博文中继续踩坑啦

能看到这里都明白的估计是个死宅了

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

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

javascript对象不完全探索记录05：小伙子，你对象咋来的？下篇 - 啥样的对象适合你

摘要：温馨提示作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示续本文内容简单，发扬了潜入潜出的精神，请谨慎浪费时间温馨提示再续魔卡少女樱动画再开撒花经过前两篇文章的梳理对象不完全探索记录小伙子，你对象咋来的上篇对象不完全探索记温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：本文内容简单，发扬了潜入潜出的精神，请谨慎浪费时间温馨提示-再续：《魔...

hlcfan 2019-08-21 18:27 评论0 收藏0
javascript对象不完全探索记录04：小伙子，你对象咋来的？中篇 - 现出你的原型！

摘要：译者注根据定义，没有原型，并作为这个原型链中的最后一个环节。由于这个属性不标准，因此一般不提倡使用。中用函数获得一个对象的。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命在上一篇博文javascript对象不完全探索记录03：小伙子，你对象咋来的？上篇，中大概说了说在js中，比较好理解的对象创建方式，分别是直接定义／字面量，和调用构造函数你对象还有原型？在一...

trigkit4 2019-08-22 11:22 评论0 收藏0
从-1开始的ES6探索之旅02：小伙子，你对象咋来的？续篇 - 你的对象班（class）里来的？

摘要：这是因为子类没有自己的对象，而是继承父类的对象，然后对其进行加工。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？温馨提示-再续：ES6简直了，放着不用简直令人发指！书接上回，即便是程序员，也还是能够通过自己的努力辛辛苦苦找到合适对象的，见前文《javascript对象不完全...

incredible 2019-08-21 18:41 评论0 收藏0
从-1开始的ES6探索之旅01：颜文字成精的箭头函数上篇 - 大哥，你指哪呢？

摘要：基础语法参数参数参数函数声明参数参数参数表达式单一相当于参数参数参数表达式当只有一个参数时，圆括号是可选的单一参数函数声明单一参数函数声明没有参数的函数应该写成一对圆括号。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？之前在某些大神的代码中出现一串神秘符号类似于num =>...

Snailclimb 2019-08-21 18:36 评论0 收藏0
javascript闭包不完全探索记录01：闭包？啥馅的？

摘要：闭包一词来源于以下两者的结合要执行的代码块由于自由变量被包含在代码块中，这些自由变量以及它们引用的对象没有被释放和为自由变量提供绑定的计算环境作用域。在以及及以上等语言中都能找到对闭包不同程度的支持。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命闭包，好吃吗？第一次听到这个词，很不幸是在一次面试中，可想而知结果很细碎，从此闭包和跨域在我匮乏的前端知识中成为了...

TANKING 2019-08-21 17:41 评论0 收藏0