深入理解JavaScript中的对象


Posted in Javascript onJune 04, 2015

 JavaScript是一种面向对象编程(OOP)语言。一种编程语言可以被称为面向对象的,它为开发者提供了四种基本功能:

  •     封装 - 存储相关的信息,无论是数据或方法,还是对象
  •     聚合 -  存储一个对象到另一个对象的内部
  •     继承 - 类的能力依赖于另一个类(或类数),用于其部分的属性和方法
  •     多态性 - 编写函数或者方法,在各种不同的方式工作

对象是由属性。如果属性包含一个函数,它被认为是一个对象的方法,否则,该属性被认为是一个属性。
对象属性:

对象的属性可以是任何三种基本数据类型的,或者任何抽象数据类型,如另一个对象。对象属性通常是内部使用的对象的方法的变量,但也可以是用于整个页面全局可见的变量。

用于添加属性的目的语法是:

objectName.objectProperty = propertyValue;

示例 :

下面是一个简单的例子来说明如何利用“称号”的文件对象的属性来获取文档标题:

var str = document.title;

对象的方法:

方法是让对象做某件事。一个函数和一个方法,所不同的是一个 function语句的一个独立的单元和方法被附加到对象,并可以通过这个关键字被引用之间的差别不大。

方法可用于一切从显示对象的屏幕上的内容,以对一组本地的属性和参数执行复杂的数学运算是有用的。
例子:

下面是一个简单的例子来说明如何使用write()文档对象的方法写在文档中的任何内容:

document.write("This is test");

用户定义的对象:

所有用户定义的对象和内置对象被称为对象的对象的后代。
new 操作符:

new运算符用于创建对象的实例。要创建一个对象,new运算符后面是构造方法。

在下面的例子中,构造方法Object(), Array(), 和 Date().。这些构造函数是内置的 JavaScript 函数。

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

Object() 构造函数:

构造函数是用来创建和初始化对象的函数。 JavaScript提供了一个特殊的构造函数调用Object()来构建的对象。Object()构造的返回值被分配给一个变量。

变量包含一个引用到新的对象。分配给该对象的属性是不变量,并且不使用var关键字来定义。
示例 1:

这个例子演示了如何创建一个对象:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
var book = new Object();  // Create the object
  book.subject = "Perl"; // Assign properties to the object
  book.author = "Mohtashim";
</script>
</head>
<body>
<script type="text/javascript">
  document.write("Book name is : " + book.subject + "<br>");
  document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>

 
示例 2:

这个例子演示如何创建一个对象,一个用户定义的函数。此处this关键字用于指已传递给函数的对象:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
function book(title, author){
  this.title = title; 
  this.author = author;
}
</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>

 
定义方法的对象:

前面的示例演示了如何构造函数创建对象并分配属性。但是,我们需要通过分配方法,以它来完成一个对象的定义。
例子:

下面是一个简单的例子来说明如何与一个对象添加一个函数:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
  this.price = amount; 
}

function book(title, author){
  this.title = title; 
  this.author = author;
  this.addPrice = addPrice; // Assign that method as property.
}

</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  myBook.addPrice(100);
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
  document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

 
with 关键字:

with关键字作为一种速记的引用对象的属性或方法。

指定为参数的对象就成为接下来的块的持续时间的默认对象。为对象的属性和方法可以在不命名的对象。
语法

with (object){
  properties used without the object name and dot
}

例子:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
  with(this){
    price = amount; 
  }
}
function book(title, author){
  this.title = title; 
  this.author = author;
  this.price = 0;
  this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  myBook.addPrice(100);
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
  document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>
Javascript 相关文章推荐
JavaScript入门之对象与JSON详解
Oct 21 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
javascript折半查找详解
Jan 26 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
详解JavaScript中void语句的使用
Jun 04 #Javascript
用JavaScript实现对话框的教程
Jun 04 #Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 #Javascript
javascript原型模式用法实例详解
Jun 04 #Javascript
使用JavaScript刷新网页的方法
Jun 04 #Javascript
JavaScript中Cookies的相关使用教程
Jun 04 #Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 #Javascript
You might like
mayfish 数据入库验证代码
2010/04/30 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
python交互式图形编程实例(三)
2017/11/17 Python
python实现多人聊天室
2020/03/31 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
Python定时器线程池原理详解
2020/02/26 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
Python读写压缩文件的方法
2020/07/30 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
CSS3 边框效果
2019/11/04 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
工程开工庆典邀请函
2014/02/01 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
奠基仪式策划方案
2014/05/15 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
golang中的struct操作
2021/11/11 Golang
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle