深入剖析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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
JavaScript事件委托实例分析
May 26 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 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
世界上第一台立体声收音机
2021/03/01 无线电
PHP中的按位与和按位或操作示例
2014/01/27 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
php简单统计在线人数的方法
2016/05/10 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
2014初中数学教研组工作总结
2014/12/19 职场文书
一年级小学生评语大全
2014/12/25 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
导游词之襄阳古城
2019/09/27 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
python 实现图片特效处理
2022/04/03 Python
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS