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

hlcfan 发布于2019-08-21 18:27 / 2350人阅读

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

温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命
温馨提示-续：本文内容简单，发扬了潜入潜出的精神，请谨慎浪费时间
温馨提示-再续：《魔卡少女樱》动画再开！撒花

经过前两篇文章的梳理
javascript对象不完全探索记录03：小伙子，你对象咋来的？上篇
javascript对象不完全探索记录04：小伙子，你对象咋来的？中篇 - 现出你的原型！

大概对javascript中对象的基本创建方法有了了解，总结一下

1.字面量创建

var girlFriend = {};
girlFriend.name = "Sakura";
girlFriend.hairColor = "brown";

2.构造函数法

function GirlFriend(name,hairColor){
    this.name = name;
    this.hairColor = hairColor
}
var sakura = new GirlFriend("Sakura","brown")

n.原型对象法（配合上面两种使用）

function GirlFriend() = {};
GirlFriend.prototype.name = "Sakura";
GrilFriend.prototype.hairColor = "brown";
var sakura = new GirlFriend();

是不是有种，对象尽在我手中，可以为所欲为了的感觉？
年轻人，你太年轻了，你怎么就知道你的对象适合你呢？

举个例子，我的对象是世界上唯一的Sakura酱（翼年代记什么的我不知道！）
我们可以通过字面量方式创建

var sakura = {
    name : "Kinomoto Sakura",
    age : 10,
    hairColor : "brown",
    job : "Cardcaptor",
    sayHello : function(yourName){
        alert("Ohayo! "+yourName)
    }
}

到此我们创建了一个名叫sakura的Cardcaptor你能看到她头发的颜色还可以和她打招呼

console.log(sakura.age);//10
sakura.sayHello("lskrat");//Ohayo! lskrat

goodjob！
我们都知道Sakura酱get的第一张卡（在动画中）是Wind，我们用同样的方式创建一个新的对象

var wind = {
    type : "ClowCard",
    owner : sakura   
}

后来Sakura酱又收集到了第二张卡片Fly

var fly = {
    type : "ClowCard",
    owner : sakura   
}

再后来，又收集到了Shadow，Water，Tree等等等等，发现问题了吧，这些ClowCard除了名字不一样，其实内部属性是完全一样的，每次创建都是再重复刚才的工作，于是在这里，我们引入构造函数，来创建ClowCard

function ClowCard(name){
    this.name = name;
    this.type = "ClowCard";
    this.owner = sakura;
    this.showOwner = function(){
        return "Sakura"
    }
}
var wind = new ClowCard("Wind");
var fly = new ClowCard("Fly");

这样写倒是创造起来很快，但是还有两个问题
1.根据构造函数创建对象的原理，实际上创建出来的对象中的属性，和方法，都被重复的创建和储存了，即便值是完全相同的，而这完全是没有必要的
2.当某些共有的属性发生变化时，需要一个个的改…，就像我们都知道的，ClowCard最终都变成了SakuraCard，我们是不是也要像Sakura酱那样一张张的再攻略一遍呢……，而且ClowCard本身其实是Clow Read创造的

在这种情况下，我们就要用到上一篇文章中梳理的关于对象原型和原型链的相关知识了,我们改写一下刚才的代码

function Card(name){
    this.name = name;
    this.showOwner = function(){
        return this.name + "-" +this.owner + "-" +this.type
    }
}
Card.prototype.type = "ClowCard";
Card.prototype.owner = "Clow Read";
var wind = new Card("Wind");
var fly = new Card("Fly");
console.log(wind.showOwner());//Wind-Clow Read-ClowCard
console.log(fly.showOwner());//Fly-Clow Read-ClowCard

我们创造了Clow Read的ClowCard，这是Sakura将出现了，她要将ClowCard变成自己的SakuraCard

Card.prototype.type = "SakuraCard"
Card.prototype.owner = "Kinomoto Sakura";
console.log(wind.showOwner());//Wind-Kinomoto Sakura-SakuraCard
console.log(fly.showOwner());//Fly-Kinomoto Sakura-SakuraCard

这种将构造函数与对象原型相结合的方式，生成的对象既有各自不同的属性，又能从原型对象处得到公有的属性和方法，适合于更多的情境下，同时还在一定程度上实现了继承

这些都是最最初级的对象创建，掌握之后也就仅仅是会减少一些幼稚的错误，以及对对象有一个基本的认识
在javascript中对象是个深坑，关于继承的实现，以及ES5中Object的很多新方法…
mdmddn

看到这里的都是小樱的真爱粉了
2017年最后一篇 - 新年快乐

GPU云服务器云服务器 javascript对象 javascript 面向对象 javascript对象方法 JavaScript对象进阶

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

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

从-1开始的ES6探索之旅02：小伙子，你对象咋来的？续篇 - 你的对象班（class）里来的？

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

incredible 2019-08-21 18:41 评论0 收藏0
javascript对象不完全探索记录03：小伙子，你对象咋来的？上篇

摘要：看着别人写的功能对，就直接拿过来用，写出来的代码臃肿到爆炸，满屏幕的的初级使用方式，运气好了能凑合跑起来，出了问题全脸懵逼，心中安慰自己一万遍我可是干设计的，但是既然打算好好整下就得从头开始看了。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命首先，说实话，我对不起javascript，作为一个接触前端快10年的老前端(伪)，一直发扬的是不求甚解的拿来就用主义。看...

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

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

trigkit4 2019-08-22 11:22 评论0 收藏0
关于JavaScript函数柯里化问题探索

摘要：函数柯里化关于函数柯里化的问题最初是在忍者秘籍中讲闭包的部分中看到的，相信很多同学见过这样一道和柯里化有关的面试题实现一个函数，使得如下断言能够能够通过简单说就是实现一个求值函数，能够将所有参数相加得出结果。方法返回一个表示该对象的字符串。函数柯里化关于函数柯里化的问题最初是在《JavaScript忍者秘籍》中讲闭包的部分中看到的，相信很多同学见过这样一道和柯里化有关的面试题：...

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

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

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