深入剖析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 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
Vue3.0的优化总结
Oct 16 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
js中的string.format函数代码
2020/08/11 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
Vue实现购物车实例代码两则
2020/05/30 Javascript
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
python安装Scrapy图文教程
2017/08/14 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
python正则-re的用法详解
2019/07/28 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Django 框架模型操作入门教程
2019/11/05 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
论文诚信承诺书
2014/05/23 职场文书
工地标语大全
2014/06/18 职场文书
教师考核表个人总结
2015/02/12 职场文书
返乡农民工证明
2015/06/24 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers