javascript对象不彻底探索记录05:小伙子,你对象咋来的?下篇 - 啥样的对象适合你

舒适提示:做者的爬坑记录,对你等大神彻底没有价值,别在我这浪费生命
舒适提示-续:本文内容简单,发扬了潜入潜出的精神,请谨慎浪费时间
舒适提示-再续:《魔卡少女樱》动画再开!撒花javascript

通过前两篇文章的梳理
javascript对象不彻底探索记录03:小伙子,你对象咋来的?上篇
javascript对象不彻底探索记录04:小伙子,你对象咋来的?中篇 - 现出你的原型!java

大概对javascript中对象的基本建立方法有了了解,总结一下segmentfault

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.原型对象法(配合上面两种使用)this

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

是否是有种,对象尽在我手中,能够随心所欲了的感受?
年轻人,你太年轻了,你怎么就知道你的对象适合你呢?prototype

举个例子,个人对象是世界上惟一的Sakura酱(翼年代记什么的我不知道!)
咱们能够经过字面量方式建立code

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

到此咱们建立了一个名叫sakuraCardcaptor你能看到她头发的颜色还能够和她打招呼对象

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年最后一篇 - 新年快乐

相关文章
相关标签/搜索