深入剖析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 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
Node.js模块加载详解
2014/08/16 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
python append、extend与insert的区别
2016/10/13 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python发展简史 Python来历
2019/05/14 Python
在django中,关于session的通用设置方法
2019/08/06 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
在keras中实现查看其训练loss值
2020/06/16 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
实习评语
2013/12/16 职场文书
德语专业求职信
2014/03/12 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
2014年业务工作总结
2014/11/17 职场文书
领导工作表现评语
2015/01/04 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
总结Python变量的相关知识
2021/06/28 Python