博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript对象不完全探索记录05:小伙子,你对象咋来的?下篇 - 啥样的对象适合你...
阅读量:5876 次
发布时间:2019-06-19

本文共 2536 字,大约阅读时间需要 8 分钟。

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

温馨提示-续:本文内容简单,发扬了潜入潜出的精神,请谨慎浪费时间
温馨提示-再续:《魔卡少女樱》动画再开!撒花

经过前两篇文章的梳理

大概对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)    }}

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

console.log(sakura.age);//10sakura.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-ClowCardconsole.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-SakuraCardconsole.log(fly.showOwner());//Fly-Kinomoto Sakura-SakuraCard

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

这些都是最最初级的对象创建,掌握之后也就仅仅是会减少一些幼稚的错误,以及对对象有一个基本的认识

在javascript中对象是个深坑,关于继承的实现,以及ES5中Object的很多新方法…
mdmddn

看到这里的都是小樱的真爱粉了

2017年最后一篇 - 新年快乐

转载地址:http://sskix.baihongyu.com/

你可能感兴趣的文章
微软同步发行Windows 10和Windows 10 Mobile系统更新
查看>>
Maven 传递依赖冲突解决(了解)
查看>>
Zeppelin的入门使用系列之使用Zeppelin运行shell命令(二)
查看>>
[Spark][Python]Spark Join 小例子
查看>>
form表单下的button按钮会自动提交表单的问题
查看>>
大战设计模式【11】—— 模板方法模式
查看>>
springBoot介绍
查看>>
Intellij IDEA 快捷键整理
查看>>
Redis 通用操作2
查看>>
11. Spring Boot JPA 连接数据库
查看>>
洛谷P2925 [USACO08DEC]干草出售Hay For Sale
查看>>
MapReduce工作原理流程简介
查看>>
那些年追过的......写过的技术博客
查看>>
小米手机解锁bootload教程及常见问题
查看>>
Python内置函数property()使用实例
查看>>
Spring MVC NoClassDefFoundError 问题的解决方法。
查看>>
CentOS 6.9配置网卡IP/网关/DNS命令详细介绍及一些常用网络配置命令(转)
查看>>
python基础教程_学习笔记19:标准库:一些最爱——集合、堆和双端队列
查看>>
C# 解决窗体闪烁
查看>>
CSS魔法堂:Transition就这么好玩
查看>>