前言

在以前的代码中,我们使用 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

格式:

  1. 开头有 var declaration 和 object 的名字
  2. 接下来各种 property 包含在 { } 中
  3. 每个 property 包含name:value,的格式
  4. 在 } 别忘了加 ;

范例:

基本操作

  1. 通过 dot notation 来 access a property,或者通过["nameOfProperty"]来达到目的,范例如:chevy.color 和 chevy['color']
  2. 改变 property 可以采用赋值的方式
  3. 增加一个新 property 可以采用赋值的方式
  4. 可以用 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相关推荐

  1. Javascript第五章location对象第五课

    ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM参考:Javascript第五章window对象的 ...

  2. Javascript第五章history对象第四课

    ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM参考:Javascript第五章window对象的 ...

  3. Javascript第五章倒计时第二课

    HTML DOM setTimeout() 方法 ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM ...

  4. Javascript第五章DOM简介和window对象第一课

    更多免费教学文章请关注这里 ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 Javascript第五章w ...

  5. Javascript第五章删除、克隆、插入、替换方法源码第九课

    更多免费教学文章请关注这里 firstChild firstElementChild第一个子节点 lastChild lastElementChild最后一个子节点 nextSibling nextE ...

  6. Javascript第五章innerHTML/innerText/创建新节点元素添加内容第八课

    测试结果: 步骤: 练习:按钮每点击一次,下面内容就增加一条 更多免费教学文章请关注这里 结果 源码: <!DOCTYPE html> <html lang="zh&quo ...

  7. Javascript第五章获取DOM对象的属性,加游览器搜索框内容点击跳转源码第七课

    注意:其中 function $(id){return document.getElementById(id);} 表示:这个就是个方法, 方法名字叫$ 参数为id. 这个是元素id. 传入这个id, ...

  8. Javascript第五章切换层效果、复选框的全选十三课

    层切换效果: 效果 复选框的全选

  9. Javascript第五章为什么用firstChild获取table中最后一个节点会取到text或者tbody第十一课

    firstChild firstElementChild第一个子节点 lastChild lastElementChild最后一个子节点 nextSibling nextElementSibling下 ...

  10. Javascript第五章改变CSS样式节点两种方法,制作导航背景切换效果第十课

    第一种方法: 鼠标移出,移入来改变导航的样式 第二种方法: 如果改变的效果较多的话 代码出现冗余 可以有className 代码如下: 效果:

最新文章

  1. LeetCode224. Basic Calculator (用栈计算表达式)
  2. XCTF WEB view_source
  3. s3c44b0x开发板之BOOT ROM配置
  4. CM: word template merge 工具
  5. Java 自动装箱与拆箱
  6. C语言及程序设计进阶例程-17 认识链表
  7. flash动画制作作品_flash施工动画制作应该展现哪些内容
  8. 响应设置cookie_注册登录 与 Cookie
  9. edge浏览器识别ip地址为手机号的解决办法
  10. squid代理简单应用
  11. 框架设计---主体函数
  12. bootstrap table 服务器端分页--ashx+ajax
  13. 以太坊虚拟机 EVM(2)Solidity运行原理
  14. Docker使用link建立容器之间的连接
  15. 目前全网最详细的树莓派 Pico入门指南!
  16. 邮件服务器lp在哪找,lp地址查询_ip地址查询定位
  17. ROS从入门到精通3-5:blender机器人模型定制皮肤贴图
  18. 【微信小程序】微信小程序项目开发哔哩哔哩小程序
  19. 简单excel宏工具对数据进行脱敏
  20. 2013电大计算机综合应用能力实训将邮件保存到考生文件夹,计算机综合应用能力实训指南.doc...

热门文章

  1. poj 匈牙利二分匹配 1274 The Perfect Stall
  2. poj 2406 Power Strings kmp基础
  3. 「Photoshop 入门教程」如何在Mac版 Photoshop 中打开图像?
  4. Mac 选项列如何设置控制中心?
  5. Wondershare Recoverit for Mac(数据恢复套件)
  6. Android提供两个常用的消息弹出框【Toast和Alert】
  7. js基础——function类型
  8. Android之HandlerThread
  9. GitHub简单教程
  10. Wince 设备环境和画笔应用