深入剖析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 相关文章推荐
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
Js经典案例的实例代码
May 10 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 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
Terran历史背景
2020/03/14 星际争霸
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
json的前台操作和后台操作实现代码
2012/01/20 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
详解Nodejs之npm&package.json
2017/06/15 NodeJs
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
用pycharm开发django项目示例代码
2019/06/13 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
高级工程师岗位职责
2013/12/15 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
教师调动申请报告
2015/05/18 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers
详解CSS3浏览器兼容
2022/12/24 HTML / CSS