深入剖析JavaScript编程中的对象概念


Posted in Javascript onOctober 21, 2015

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...
此外,JavaScript 允许自定义对象。
所有事物都是对象
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

  • 布尔型可以是一个对象
  • 数字型可以是一个对象
  • 字符串也可以是一个对象
  • 日期是一个对象
  • 数学和正则表达式也是对象
  • 数组是一个对象
  • 甚至函数也可以是对象

JavaScript 对象

对象只是一种特殊的数据。对象拥有属性和方法。
访问对象的属性
属性是与对象相关的值。
访问对象属性的语法是:

objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度:

var message="Hello World!";
var x=message.length;

在以上代码执行后,x 的值将是:

12

访问对象的方法
方法是能够在对象上执行的动作。
您可以通过以下语法来调用方法:

objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:

var message="Hello world!";
var x=message.toUpperCase();

在以上代码执行后,x 的值将是:

HELLO WORLD!

创建 JavaScript 对象
通过 JavaScript,您能够定义并创建自己的对象。
创建新对象有两种不同的方法:

  1. 定义并创建对象的实例
  2. 使用函数来定义对象,然后创建新的对象实例

创建直接的实例
这个例子创建了对象的一个新实例,并向其添加了四个属性:
实例

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

替代语法(使用对象 literals):
实例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用对象构造器
本例使用函数来构造对象:
实例

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)
创建 JavaScript 对象实例
一旦您有了对象构造器,就可以创建新的对象实例,就像这样:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

把属性添加到 JavaScript 对象
您可以通过为对象赋值,向已有对象添加新属性:
假设 personObj 已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;

T在以上代码执行后,x 的值将是:

John

把方法添加到 JavaScript 对象
方法只不过是附加在对象上的函数。
在构造器函数内部定义对象的方法:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}

changeName() 函数 name 的值赋给 person 的 lastname 属性。
现在您可以试一下:

myMother.changeName("Doe");
Javascript 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
JavaScript中Boolean对象的属性解析
Oct 21 #Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 #Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 #Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 #Javascript
13个PHP函数超实用
Oct 21 #Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 #Javascript
JavaScript对象数组的排序处理方法
Oct 21 #Javascript
You might like
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python AES加密实例解析
2018/01/18 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
小学生读书感言
2014/02/12 职场文书
婚庆司仪主持词
2014/03/15 职场文书
学生保证书范文
2014/04/28 职场文书
婚宴邀请函
2015/01/30 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
紫日观后感
2015/06/05 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python