《JS&jQuery 交互式web前端开发》（三）函数、方法与对象

3 函数、方法与对象

3.1 函数和方法

什么是函数

• 使一系列语句组织成一个整体，以执行某一特定任务
• 在不同的地方重复执行任务，直接重用函数即可（不必重复使用相同的一组语句）

相关概念

• 函数调用：通知函数所表示的任务执行
• 参数：传递给函数用于完成任务的信息片段
• 返回值：编写函数并期望它能提供回答时，函数提供的响应
• 匿名函数：因没有名字而不能被调用，解释器经过时会立即运行

普通函数的声明、调用

• 声明

  function sayHello(){
  document.write('hello!');
  }
  

  • function：声明函数的关键字
  • sayHello：函数名
  • { document.write('hello!'); }：函数执行的任务内容
• 调用

  sayHello();
  

  • 可以在同一个JavaScript文件中调用一个函数无数次
  • 函数可以在声明之前被调用

带形参函数的声明、调用

• 声明

  function getArea(width,height){
  return width*height;
  }
  

  • width,height：形参，在函数体中，它们的行为和变量一样
  • width*height：在函数体内，形参的使用类似于变量
• 调用

  //值作为形参
  getArea(3,5);
  
  //调用：变量作为形参
  wallWidth = 3;
  wallHeight = 5;
  getArea(wallWidth,wallHeight);
  

  • 区分：形参/实参
    • 形参：函数名后括号中的内容；在函数体中行为和变量一样
    • 实参：实数或包含实数的变量，传入代码中具体执行函数

从函数中得到返回值

• 单一值

  function calculateArea(width,height){
  var area = width*height;
  return area;
  }
  var wallOne = calculateArea(3,5);     //计算值：	wallOne = 15
  var wallTwo  = calculateArea(8,5);    //计算值：	wallTwo = 40
  

  • return：出现 return 关键字，解释器立即离开函 数，回到调用函数的语句。如果之后还有语句，将会直接跳过而不执行
  • 同一个函数使用不同的值执行相同的步骤
• 多个值：使用数组

  function getSize(width,height,depth){
  var area = width*height;
  var volume = width*height*depth;
  var sizes = [area,volume]; 
  return sizes;                 //sizes[0] = area , sizes[1] = volume
  }
  var areaOne = getSizes(3,2,3)[0];     //计算值：	areaOne = 3*2 = 6
  var volumeOne = getSizes(3,2,3)[1];     //计算值：volumeOne = 3*2*3 = 18
  

匿名方法和函数表达式

• 函数声明：创建供代码调用的函数

  //命名函数
  function area(width,height){
  	return width*height;
  }
  var size = area(3,4);
  

• 函数表达式：将函数放在原本表达式的位置，函数将被当做表达式对待

  //匿名函数
  var area = function(width,height){
  	return width*height;
  }
  var size = area(3,4);
  

立即调用函数表达式 IIFE

• 语法

  var area = (function(){
  	var width = 3;
  	var height = 5;
  	return width*height;
  }())
  

  • 外层括号：分组操作符，确保解释器将这作为一个表达式对待
  • 内层括号：告诉解释器马上调用此函数
• 使用时机：代码只需运行一次，而非在脚本中反复调用
  • 举例
    • 当函数被调用时作为实参
    • 用于为对象的属性赋值
    • 用于事件处理程序和监听器，在事件发生时执行任务
    • 用于防止在两段脚本中因使用相同的变量名而产生的冲突
• 说明：IIFE 通常被用作一组代码的封装器，有效地保护变量，防止其他脚本中可能出现同名变量

变量作用域

• 含义
  • 变量的声明位置将影响它的应用范围
  • 如果在函数内部声明，就只能用于此函数
• 局部变量、全局变量

  function getArea(width,height){
  	var area = width*height;       //area：局部变量
  	return area;
  }
  var wallSize = getArea(3,2);      //wallSize：全局变量
  document.write(wallSize);
  

  • 局部变量（函数级别变量）
    • 函数内部使用var创建的关键字，只能在函数内部使用，具有局部作用域（函数级别作用域）
    • 函数运行时解释器创建一个局部变量，函数完成任务后立即销毁
      • 如果函数运行两次，变量可能具有不同的值
      • 两个不同的函数可以使用同名变量，而不会引起冲突
  • 全局变量
    • 在函数的外部创建变量，可以在脚本的任何地方被使用，具有全局作用域

内存和变量的工作原理

• 局部变量、全局变量
  • 局部变量：只在函数执行期间被保存
  • 全局变量：在页面载入浏览器时进驻内存
• 创建变量
  • 每个变量的声明都存在内存开销
  • 浏览器需要保存的变量越多，运行脚本时用到的内存资源越多，页面响应用户的时间越长
• 命名冲突
  • 全局作用域中的变量：有命名冲突
  • 函数作用域中的变量：没有命名冲突

3.2 对象

简介

• 对象将变量、函数结合起来
  • 变量：被视为属性，属性描述对象
  • 函数：被视为方法，方法代表和对象相关的任务
• 键：对象的名称

创建单个对象：字面量语法

• 语法：键:值,

  //hotel对象包含的键/值对
  //属性：
  	name:'quay',
  	rooms:40,
  	booked:25,
  	gym:true,
  	roomTypes:['twin','double','suite'],
  //方法：
  	checkAvailability:function{
  		return this.room - this.booked;
  	}
  };
  

• 适用场景
  • 在程序之间存储、传输数据
  • 用于全局对象或为页面设置信息的配置对象

访问对象、点标记语法

• 点标记语法：访问对象的属性或方法时使用对象.属性/方法

  • .：成员操作符

  //点标记语法
  var hotelName = hotel.name;
  var roomsFree = hotel.checkAvailability();
  

• 方括号访问对象的属性（不能访问方法）

  var hotelName = hotel['name'];
  

• 常见用法：

  • 属性名是数字
  • 用变量代替属性名

创建多个对象：构造函数语法

• 函数Object()是JavaScript语言的一部分，用于创建对象

  //创建空白对象 hotel
  var hotel = new Object();    
  //使用点语法添加属性、方法
  hotel.name = 'Quay';
  hotel.rooms = 40;
  hotel.booked = 25;
  hotel.checkAvailability = function(){
  	return this.rooms - this.boocked;
  }
  

  //使用字面量语法创建空对象
  var hotel = {}
  

• 适用场景

  • 在同一页中有很多对象，他们有相似的功能
  • 代码中没有复杂的对象

修改对象

• 修改：点标记语法、方括号语法
  • 若对象中无此属性，会将属性添加到对象上

  //点标记语法
  hotel.name = 'Park';
  //方括号语法
  hotel['name'] = 'Park';
  

删除对象

• 语法：delete 对象.属性

  delete hotel.name;
  

创建很多对象：构造函数

• 构造函数的名称：首字母大写，提醒开发人员使用该函数创建对象时使用new关键字
• 对象在函数中被定义，但只有在需要时才会被创建

function Hotel(name,rooms,booked){
	//属性
	this.name=name;
	this.rooms=rooms;
	this.booked=booked;
	//方法
	this.checkAvailability=function(){
		return this.rooms-this.booked;
	}
}
//使用构造函数创建对象
var quayHotel=new Hotel('quay',40,25);
var parkHotel=new Hotel('park',120,77);

this关键字

• 作用：代替对象名称，指向当前函数所在的对象
• 局部作用域函数
  • 当一个函数创建于脚本的最高级别时，就位于全局作用域（全局上下文）上,此时使用this关键字，指的就是window对象

    function windowSize(){
    	var width=this.innerWidth;
    	var height=this.innerHeight;
    	return [width,height];
    }
    

• 全局变量
  • 所有全局变量都成为window对象的属性，此时可以通过window对象访问，和使用属性一样

    var width=600;
    var shape={width:300};
    var showWidth=function(){
    	document.write(this.width);
    };
    showWidth();
    

• 对象的方法
  • 在对象内定义函数时，该函数就是一个方法，this引用的是包含此方法的对象

    var shape=function(){
    	width:600;
    	height:400;
    	getArea:function(){
    		//如果用构造函数创建多个对象，则this指向每个对象的独立实例
    		return this.width*this.height;
    	}
    };
    

• 表达式作为方法
  • 命名函数被定义于全局作用域内，且马上被作为对象的方法使用，则this指代包含它的对象

    var width=600;
    var shape={width:300};
    var showWidth=function(){
    	//this指向shape对象，而不是全局上下文
    	//输出值：300
    	document.write(this.width);
      };
    //showWidth()被用作shape对象的一个方法，并被赋予名称getWidth()
    shape.getWidth=showWidth;
    shape.getWidth();
      ```
    
    

数组是对象

• 数组是一种特殊类型的对象，存储一组相关的值对，只不过每个值的键都是索引编号
• 对象中的数组

属性	值
room1	items[420,40,10]
room2	items[460,20,20]
room3	items[230,0,0]
room4	items[620,150,60]

//获取room1房间的第一次费用
costs.room1.items[0];

• 数组中的对象

索引值	值
0	{accom:420,food:40,phone:10}
1	{accom:460,food:20,phone:20}
2	{accom:230,food:0,phone:0}
3	{accom:620,food:150,phone:60}

//第三间客房的话费账单
costs[2].phone;

3.3 内置对象

• 对象模型：一组对象，每个对象代表一些相关的来自真实世界的事物

浏览器对象模型 BOM

• 包含一系列表示当前窗口或标签的对象（浏览器历史记录···）
• 最顶端是window对象，代表当前浏览器窗口或标签；子对象展示浏览器的其他特性
• window对象
  • 属性：innerHeight innerWidth location histor···
  • 方法：alert() open() print()···

文档对象模型 DOM

• 使用对象为当前页创建展现，为页面中每个元素（每段独立文本）创建一个新对象
• 最顶端是document对象，代表整个页面；子对象展现当前页面的其他项
• document对象
  • 属性：title lastModified URL domain···
  • 方法：write() getElementById() createElement()···

全局JavaScript对象

• 代表需要让JavaScript语言创建模型的事物

• 全局对象模型的名字通常首字母大写

• 帮助处理真实世界概念的对象

  • RegEx：匹配文本的字符串模式

• String对象：处理字符串

  • 属性：length返回字符串中的字符数
  • 方法
    • toUpperCase()将字符串修改为大写字母
    • toLowerCase()将字符串修改为小写字母
    • charAt()以索引编号为参数，返回此处的字符
    • indexOf()查找字符，返回首次出现的索引编号
    • lastIndexOf()查找字符，返回最后一次出现的索引编号
    • substring()返回两个索引编号之间的字符，包含第一个编号处字符，不包含第二个
    • split()指定字符，用查找到的每个此字符分割字符串，存储在数组中
    • trim()删除开始、结尾的空格
    • replace()查找、替换

• Number对象：处理数字

  • 方法
    • isNaN()检查值是否为数字
    • toFixed()按特定数字（小数点后位数）四舍五入，返回一个字符串
    • toPrecision()按数字位数（整个数字位数）四舍五入，返回一个字符串
    • toExponential()指数计数法表示数字，返回一个字符串

• Math对象：处理数字和计算

  • 属性：Math.PI()返回pi值 3.14159265359
  • 方法
    • round()四舍五入到离得最近的整数
    • sqrt()返回平方根
    • ceil()四舍五入到离得最近并大于本身的整数
    • floor()四舍五入到离得最近并小于本身的整数(舍弃小数位)
    • random()获取一个0~1的随机数（包括0不包括1）

  //使用 Math对象创建随机数
  //如果使用 round()替代 floor()方法，则1和10出现的概率是其他数字的一半
  var randomNum=Math.floor(Math.random()*10)+1;
  

• Date对象：展现、处理日期

  • 创建Date对象时，默认存储当前日期；如果需要存储其他日期，需要显式指定
  • 方法
    • getDate() setDate() 返回/设置日期：1~31
    • getDay() 返回星期几：0~6
    • getFullYear() setFullYear() 返回年份：4位数字
    • getHours() setHours() 返回/设置小时：0~23
    • getMilliseconds() setMilliseconds() 返回/设置毫秒数：0~999
    • getMinutes() setMinutes() 返回/设置分钟：0~59
    • getMonth() setMonth() 返回/设置月份：0~11
    • getSeconds() setSeconds() 返回/设置秒：0~59
    • getHours() setHours() 返回/设置从1970年1月1日00:00:00 （UTC:世界标准时间）开始计算的毫秒数；如果是在这之前的时间，返回负数
    • getTimezoneOffset()按本地时间返回时区偏差值：按分钟
    • toDateString()返回适合人类阅读的日期 (如：Wed Apr 16 1975)
    • toTimeString()返回适合人类阅读的时间（Unix时间）
    • toString()返回表示特定日期的字符串

3.4 示例：函数、方法与对象

第一部分：显示酒店详细信息

• 创建hotel对象：包括3个属性（酒店名称、入住率、折扣）、1个方法（计算显示给用户的价格）

var hotel = {
		name:'Park',
		roomRate:240,   //金额（美元）
		discount:15,    //折扣百分比
		offerPrice:function(){
			var offerRate = this.roomRate*(100-this.discount)/100;
			return offerRate;
		}
	}

• 折扣详情的显示：使用Number对象的.toFixed()方法，确保折扣显示为小数点后两位

roomRate.textContent = '$'+hotel.roomRate.toFixed(2);

第二部分：显示当订单过期时的消息

• 使用offerExpires()方法显示订单将在7天后失效

function offerExpires(today){
		//在函数内声明局部变量
		var weekFromToday,day,date,month,year,dayNames,monthNames;
		//7天时间（表示到毫秒）
		weekFromToday = new Date(today.getTime()+7*24*60*60*1000);
		//创建数组存储星期、月份
		dayNames = ['周日','周一','周二','周三','周四','周五','周六'];
		monthNames = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
		//展示日期信息
		day = dayNames[weekFromToday.getDay()];
		date = weekFromToday.getDate();
		month = monthNames[weekFromToday.getMonth()];
		year = weekFromToday.getFullYear();
		//创建消息
		expiryMsg = '订单过期时间：下'+day+'('+date+'日 '+month+' '+year+'年)';
		return expiryMsg;
	}
	today = new Date();     //存储今天的日期
	elEnds = document.getElementById('offerEnds');   //获取页面中对应的元素
	elEnds.innerHTML = offerExpires(today);    //修改内容，显示过期消息

全部代码

• example.html文件（自行创建，包含js文件中用到的element就可以了）

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<title>示例</title>
  	
  </head>
  <body>
  	<div class="" id="hotel">
  		<div class="hotelName" id="hotelName">这里是酒店名</div>
  		<div class="roomRate" id="roomRate">这里是标准价</div>
  		<div class="specialRate" id="specialRate">这里是折扣价</div>
  	</div>
  	<div class="offerEnds" id="offerEnds">过期提醒</div>
  	
  </body>
  <script src="js/example.js"></script>
  </html>
  

• example.js文件（相比原书有少许改动）

//立即调用函数表达式（IIFE，Immediately Invoked Function Expression），定义后立即执行
(function(){
	//part 1：显示酒店详细信息
	//创建hotel对象
	var hotel = {
		name:'Park',
		roomRate:240,   //金额（美元）
		discount:15,    //折扣百分比
		offerPrice:function(){
			var offerRate = this.roomRate*(100-this.discount)/100;
			return offerRate;
		}
	}
	//输出显示酒店名称、标准价、折扣价
	var hotelName,roomRate,specialRate;     //声明变量
	hotelName = document.getElementById('hotelName');
	roomRate = document.getElementById('roomRate');
	specialRate = document.getElementById('specialRate');
	//分别输出
	hotelName.textContent = hotel.name;    
	roomRate.textContent = '$'+hotel.roomRate.toFixed(2);    //折扣显示为小数点后两位
	specialRate.textContent = '$'+hotel.offerPrice();

	//part 2：显示订单过期消息
	var expiryMsg;  //向用户展示的信息
	var today;      //显示今天的日期
	var elEnds;     //显示订单过期消息
	function offerExpires(today){
		//在函数内声明局部变量
		var weekFromToday,day,date,month,year,dayNames,monthNames;
		//7天时间（表示到毫秒）
		weekFromToday = new Date(today.getTime()+7*24*60*60*1000);
		//创建数组存储星期、月份
		dayNames = ['周日','周一','周二','周三','周四','周五','周六'];
		monthNames = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
		//展示日期信息
		day = dayNames[weekFromToday.getDay()];
		date = weekFromToday.getDate();
		month = monthNames[weekFromToday.getMonth()];
		year = weekFromToday.getFullYear();
		//创建消息
		expiryMsg = '订单过期时间：下'+day+'('+date+'日 '+month+' '+year+'年)';
		return expiryMsg;
	}
	today = new Date();     //存储今天的日期
	elEnds = document.getElementById('offerEnds');
	elEnds.innerHTML = offerExpires(today);    //显示过期消息

})();

运行结果