Javascript 第五章总结:A trip to Objectville
前言
在以前的代码中,我们使用 primitive 类型的变量和 procedural manner 来执行脚本。但是,更好的办法是 object-oriented (面向对象)的。作者说:它能让我们 better in a programming sense,并且你不再想用原来的 procedural manner 的那种方法了。
什么是 Object,什么是 OO(Objective Oriented)?
Object的定义
JavaScript 中的 object 指的是: a collection of properties,这些 properties 中又包括它们的 name 和 value.
OO的定义
OO 指的是一种编程的思想,它包括两个要素:state s和 behaviors。通过对象的特征的引用来达到目的,而不是 procedual 那样一步一步来。
引用:
Objects that have state (like a car might have an oil and fuel level), and behavior (like a car can be started, driven and stopped).
In objec-oriented programming, we think in terms of objects rather than procedures.
对于 OO 的好处,作者这样表述:
object-oriented programming allows you to free your mind to think at a higher level.
Javascript 中的 object [state部分]
定义一个 object
格式:
- 开头有 var declaration 和 object 的名字
- 接下来各种 property 包含在 { } 中
- 每个 property 包含
name:value,
的格式 - 在 } 别忘了加 ;
范例:
基本操作
- 通过 dot notation 来 access a property,或者通过["nameOfProperty"]来达到目的,范例如:chevy.color 和 chevy['color']
- 改变 property 可以采用赋值的方式
- 增加一个新 property 可以采用赋值的方式
- 可以用 delete operator删除一个 property,格式:delete fido.dogYears.
###object 的实质
object 的 var 类型实际上表表明了这是类似于 pointer 的储存着 reference 的值。
因此,在函数进行传递的时候,由于传递的是地址, 所以在函数中处理的是 same object,因此在函数中的命令会改变它的值。
Javascript 中的 object [behavoir部分]
在 object 中添加函数
格式:先写一个 name,然后再写函数部分:function(parameter){}
范例:
state 和 behavior 之间的关系
Have you also notice these two interact? Like, we can't start a car if it doesn't have fuel, and the amount of fuel should get reduced as we drive the car. Kinda like read life, right?
使用关键字:this
在 object 中,value 和 behavoir 是相互影响的,因此当我们需要在 object 中的 behavior 调用 object 中的 value。
调用的方法是使用 this 这个 keyword. 表示 这个函数所在的 object 中的这个值,因此它是相对的。
格式:this.nameOfproperty
使用 for-in 用来iterate throngh an object's properties
格式:for (var .. in nameOfObject){
block;}
范例:for (var prop in chevy) {
console.log(...)
}
转载于:https://www.cnblogs.com/FBsharl/p/10217282.html
Javascript 第五章总结:A trip to Objectville相关推荐
- Javascript第五章location对象第五课
ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM参考:Javascript第五章window对象的 ...
- Javascript第五章history对象第四课
ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM参考:Javascript第五章window对象的 ...
- Javascript第五章倒计时第二课
HTML DOM setTimeout() 方法 ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM ...
- Javascript第五章DOM简介和window对象第一课
更多免费教学文章请关注这里 ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 Javascript第五章w ...
- Javascript第五章删除、克隆、插入、替换方法源码第九课
更多免费教学文章请关注这里 firstChild firstElementChild第一个子节点 lastChild lastElementChild最后一个子节点 nextSibling nextE ...
- Javascript第五章innerHTML/innerText/创建新节点元素添加内容第八课
测试结果: 步骤: 练习:按钮每点击一次,下面内容就增加一条 更多免费教学文章请关注这里 结果 源码: <!DOCTYPE html> <html lang="zh&quo ...
- Javascript第五章获取DOM对象的属性,加游览器搜索框内容点击跳转源码第七课
注意:其中 function $(id){return document.getElementById(id);} 表示:这个就是个方法, 方法名字叫$ 参数为id. 这个是元素id. 传入这个id, ...
- Javascript第五章切换层效果、复选框的全选十三课
层切换效果: 效果 复选框的全选
- Javascript第五章为什么用firstChild获取table中最后一个节点会取到text或者tbody第十一课
firstChild firstElementChild第一个子节点 lastChild lastElementChild最后一个子节点 nextSibling nextElementSibling下 ...
- Javascript第五章改变CSS样式节点两种方法,制作导航背景切换效果第十课
第一种方法: 鼠标移出,移入来改变导航的样式 第二种方法: 如果改变的效果较多的话 代码出现冗余 可以有className 代码如下: 效果:
最新文章
- LeetCode224. Basic Calculator (用栈计算表达式)
- XCTF WEB view_source
- s3c44b0x开发板之BOOT ROM配置
- CM: word template merge 工具
- Java 自动装箱与拆箱
- C语言及程序设计进阶例程-17 认识链表
- flash动画制作作品_flash施工动画制作应该展现哪些内容
- 响应设置cookie_注册登录 与 Cookie
- edge浏览器识别ip地址为手机号的解决办法
- squid代理简单应用
- 框架设计---主体函数
- bootstrap table 服务器端分页--ashx+ajax
- 以太坊虚拟机 EVM(2)Solidity运行原理
- Docker使用link建立容器之间的连接
- 目前全网最详细的树莓派 Pico入门指南!
- 邮件服务器lp在哪找,lp地址查询_ip地址查询定位
- ROS从入门到精通3-5:blender机器人模型定制皮肤贴图
- 【微信小程序】微信小程序项目开发哔哩哔哩小程序
- 简单excel宏工具对数据进行脱敏
- 2013电大计算机综合应用能力实训将邮件保存到考生文件夹,计算机综合应用能力实训指南.doc...