JS对象深度解析：创建、操作与原型理解-优快云博客

对象

JS是一门基于对象的语言,在JS中对象无处不在!

对象是数据和功能的集合.

JS创建对象的特征":

获取对象的方式由两种:类来实例化对象和由对象圆形实例化对象实例.

PHP  类->对象

图纸(类)->高楼大厦(对象)    


JS	对象原型->对象实例

一个房屋钢架(对象原型)->高楼大厦(对象实例)

JS的对象创建方式:

new一个构造方法实例化一个对象

对象实例 = new 构造方法();

JSON格式创建对象

对象实例 = {属性名:值,属性名:值,....}

JS对象的操作:

添加成员

对象变量.成员属性名=值;
对象变量.成员方法名=函数;

删除成员

delete 对象变量.成员属性名
delete 对象变量.成员方法名

修改对象成员

对象变量.成员属性名 =新值
对象变量.成员方法名=新函数

访问对象成员

对象变量.成员属性名
对象变量.成员方法名()

对象的遍历

for(var 变量 in 对象){
	可以使用对象[变量]的方式进行值的遍历
}

关于this

可以在JS的成员方法中使用this代替当前对象来访问当前对象的成员
this.成员属性名
this.成员方法名()

注意:在JS中对象的构造方法和对象原型是一一对应的.没存在一个构造方法就存在一个同名的对象圆形,反之亦然.

如何自定义对象圆形并且创建对象实例

方法1:实例化Object对象,并且添加成员

var obj=new Object()

方法2:使用工厂模式创建对象

function 函数名(){
	//声明一个对象
	var o=new Object();
	//添加成员
	o.sex=值
	o.name=值
	....

	//返回设置好的对象
	return o;
}

特征:可以快速创建相似成员的对象,可惜不能判断构造方法和圆形,都是Object制作的

方法3:自定义构造方法,使用this添加成员

function Plane(type,speed){
	//console.log(this);
	//添加成员
	this.type=type;
	this.speed=speed;
	this.fly=function(){
		console.log('我要飞得很高~');
	}
}
		
//实例化对象
var myplane=new Plane('747','1500KM');

特征:可以快速的创建相同成员的对象,并且可以判断对象的构造方法和原型,效率不够精简.

方法4:自定义构造方法,使用prototype向原型中添加成员

function Plane(type,speed){
	//添加成员
	Plane.prototype.type=type;
	Plane.prototype.speed=speed;
	Plane.prototype.fly=function(){
		console.log('我要飞得很高~');
	}
}

//实例化对象
var myplane=new Plane('747','1500KM');

特征::可以快速的创建相同成员的对象,并且可以判断对象的构造方法和原型,效率很精简,但是属性的共享导致一个成员的属性发生变化,所有对象的属性值都改变了.

方法5:自定义构造方法同时使用this和Prototype 添加成员

		function Plane(type,speed){
			//添加成员
			//将成员属性添加到对象实例当中(不可以共享)
			this.type=type;
			this.speed=speed;
			//将成员方法添加到对象原型当中(可以共享)
			Plane.prototype.fly=function(){
				console.log('我要飞得很高~');
			}
		}
		
		//实例化对象
		var myplane1=new Plane('747','1200KM');
		console.log(myplane1.type);

特征::可以快速的创建相同成员的对象,并且可以判断对象的构造方法和原型,效率很精简,属性也可以单独分开,互不影响,方法还可以共享.

方法6:究极奥义

	//同时使用this和prototype来处理成员
	function Plane(type,speed){
		//添加成员
		//将成员属性添加到对象实例当中(不可以共享)
		this.type=type;
		this.speed=speed;
		//判断当前对象是否可以访问fly方法
		if(typeof this.fly !='function'){
			//将成员方法添加到对象原型当中(可以共享)
			Plane.prototype.fly=function(){
				console.log('我要飞得很高~');
			}
		}
		
	}

特征::可以快速的创建相同成员的对象,并且可以判断对象的构造方法和原型,效率很精简,属性也可以单独分开,互不影响,方法还可以共享.

学习系统自带的对象和对象原型

Object对象原型:

Object对象是JS的底层对象,JS中的所有内容都是基于该对象创建的,所以Object对象是所有其他对象的原型.

成员属性:

prototype  可以访问对象的原型

	格式:构造方法名.prototype

constructor  访问构造方法的属性

	格式:实例.constructor

__proto__ 访问对象的原型

	格式: 实例.__proto__   仅chrome可以使用

成员方法:

toString()  返回对象的字符串格式

toLocaleString() 返回对象的本地字符串格式

valueOf()  返回对象的原始值.

Array对象原型

在JS中没有数组这个类型,数组时由专门的数组对象实例化而来的对象实例.
在JS中只有索引数组,没有关联数组,必须是从0开始连续的索引数组.
在JS中如果使用[字符串]添加数组元素,则会被强制变为对象的成员属性.

创建数组的方法

1.实例化构造方法Array

//创建一个空数组
var arr=new Array();
console.log(arr);

//创建一个具有制定元素的数组
var arr=new Array('你','我','他',1,2,3);
console.log(arr);

//创建制定长度的数组
var arr=new Array(5);
console.log(arr);

2.数组字面量

var arr = [];
console.log(arr);

//创建一个具有制定元素的数组
var arr=['你','我','他',1,2,3];
console.log(arr);

//创建制定长度的数组
var arr=[,,,,,];
//arr.length=5;
console.log(arr);

数组的操作

添加元素

数组变量[数组变量.length]=值

删除元素(仅可以删除值,不可以删除键)

delete 数组变量[下标]

修改元素

数组变量[制定下标]=新值;

使用元素

数组变量[下标]

遍历数组

for(var i =0 ;i<数组变量.length;i++){
	//循环体
}

数组中的常用函数

直接操作原有数组的方法

pop() 在数组的结尾处弹出一个元素

格式:弹出的元素变量=数组变量.pop()

push() 在数组的结尾处添加元素

格式:数组元素个数变量=数组变量.push(N个元素)

shift() 在数组的开头处移除一个元素

格式:弹出的元素变量=数组变量.shift()

unshift()在数组的开头处添加元素

格式:数组元素个数变量=数组变量.unshift(N个元素)

concat() 数组连接方法

格式:新数组变量=数组变量.concat(元素,元素....)  可以添加元素也可以是数组

join() 数组元素连接方法,使用指定的字符串将数组元素进行连接

格式:字符串变量=数组变量.join('连接字符串')

reverse() 数组反转方法

格式:数组变量=数组变量.reverse();

slice() 返回数组中的一段

格式:数组变量 = 数组变量.slice(开始位置,结束位置)

注意:

位置参数,可以正数,可以负数,正数表示从前向后数,负数表示从后向前数.

如果只有一个参数表示,从指定位置截取的最后.

参数的意思是从指定开始位置,截取到结束位置之前(不包含结束位置的元素)

sort() 数组排序函数

格式:数组变量=数组变量.sort()   字符排序

格式:数组变量=数组变量.sort(排序的回调函数)  数字排序

回调函数的要求:
	
	必须具有2个形参
	必须返回正数/0/或者负数.

splice() 数组的万能方法增删改

添加操作:

	splice(指定位置,0,新增元素,新增元素...)

删除操作:

	splice(指定位置,删除个数)

修改操作

	splice(指定位置,删除个数1,新增元素1);

注意:splice操作会直接改变原有数组.

Boolean对象原型

Boolean对象是在进行布尔值声明或者类型转换时隐式调用的构造方法或者函数,不需要认为调用.

实例化布尔对象:(仅供演示)

var bool= new Boolean(布尔值);

bool的结果是一个布尔值的对象

直接声明布尔值(推荐方式)

var bool = 布尔值

Date对象

在JS中为了方便存储和运算时间采用的是时间戳格式.

但是和PHP中的时间戳略有不同.

1.js的时间戳是毫秒级别
2.js的时间戳可以使用285616年..够用到死.
3.表示从1970年1月1日0时0分0秒到制定时间的毫秒数
4.1秒 = 1000毫秒

实例化时间对象:

实例化一个当前的时间对象
var now=new Date();

创建制定时间(时间戳)
var now=new Date(10000000000000);

使用指定时间格式创建时间对象
var now=new Date('2015.12.08 22:35:12');

使用制定的时间参数创建对象
var now=new Date(2038,11,23,11,08,45,99);

常用时间函数

getFullYear()

获取完整的时间年份

getYear()

获取三位数或者两位数的时间年份

getMonth()

获取月份  0-11

getDate()

获取月中第几天 1-31

getHours()

获取小时数  0-23  24开始进入下一天

getMinutes()

获取分钟数 0-59

getSeconds()

获取秒数0-59

getMilliseconds()

获取毫秒数0-999

getDay()

获取星期几  0-6 表示  周天-周六

setFullYear()

设置完整的时间年份

setMonth()

设置月份  0-11

setDate()

设置月中第几天 1-31

setHours()

设置小时数  0-23  24开始进入下一天

setMinutes()

设置分钟数 0-59

setSeconds()

设置秒数0-59

setMilliseconds()

设置毫秒数0-999

getTime()

获取当前的时间戳(毫秒)

setTime()

设置当前的时间戳(毫秒)

parse()

将时间格式字符串解析为时间戳.

toDateString()

返回完整时间的日期部分  年月日

toTimeString()

返回完整时间的时间部分  时分秒 时区

getTimezoneOffset()

获取当前时区的偏移值

注意:时间方法有两套,本地时间和UTC(国际)时间. 唯一的差别是所有的UTC时间方法都比本地时间方法多了UTC三个字母而已.getDate(本地获取时间) getUTCDate(国际获取时间)

Function对象圆形

定义一个函数,可以使用声明函数和匿名(表达式)函数两种方式

Function对象原型用于隐式创建函数的基本对象.

如何使用对象方式创建函数?

var 变量=new Function ('形参','形参','形参',....'函数体');

注意:该方法仅供学习使用,定义函数使用声明或者表达式函数方式即可.该方法就是表达式函数的一种而已.

GLOBAL固有对象

在浏览器中Global是一个固有对象,不需要用户实例化,就可以使用对象.

作用:

将页面中的全局变量和全局函数,全部集中在当前的全局对象中成为其成员.

在浏览器中全局对象Global必须有浏览器本身实现,他是浏览器中的window对象.

isNaN()

检测是否是NaN类型

parseInt()

将字符串类型强制转换为整型

parseFloat()

将字符串类型强制转换为浮点型

eval()

将JS代码字符串当做代码来执行.

Math对象固有对象

Math对象的主要功能是为JS提供所有数学方法的集合对象.

abs()

获取绝对值的方法

ceil()

向上取整方法

floor()

向下取整方法

round()

四舍五入方法

max()

获取N个数值中的最大值

min()

获取N个数值中的最小值

random()

随机获取0-1之间的小数,包含0但是不包含1.

sqrt()

开平方根的房

pow()

计算一个数的N次方.

Number对象原型

该对象原型是在创建数值数据时隐式调用的对象原型.,很少使用它.

MAX_VALUE 获取最大值

MIN_VALUE 获取最小值

String对象原型

该对象原型可以用于声明字符串对象,也可以当做字符串转换函数使用.

charAt()

返回指定位置的字符

charCodeAt()

返回指定位置的字符的ASCII码

concat()

字符串连接方法

indexOf()

获取第一次出现指定字符的位置

lastIndexOf()

获取最后一次出现指定字符的位置.

slice()

字符串切割方法,使用方法和数组的slice一致

substr()

字符串切割方法

substring()

字符串切割方法

注意:

参数
	slice(开始位置,结束位置)  从开始截取到结束位置
	substr(开始位置,截取长度) 从开始位置截取制定的长度
	substring(位置,位置)		返回两个位置之间的字符串

参数正负

	slice()的参数 正数从前数,负数倒数
	substr()的参数 位置正数从前数,负数倒数  长度不能为负数
	substring()的参数 位置 负数表示0位置,根本不存在倒数


截取方式
	slice() 从开始到结束
	substr() 从开始计算个数
	substring() 返回两个位置之间的内容,没有开始和结束的区别

match() 进行一次正则匹配操作

如果在非g模式下,字符串的match方法和正则的exec方法完全相同.
在g,模式下,字符串的match方法返回字符串中所有符合正则表达式的字符串数组,exec方法依然返回一次匹配的结果

replace() 正则或者字符串替换操作

格式:新字符串= 字符串.replace(规则,替换内容)

规则可以是字符串可以是正则表达式.

search() 返回正则表达式匹配的第一个字符串的位置

格式 位置变量=字符串.search(规则)
规则可以是字符串可以是正则表达式.

正则表达式对象

如何声明正则表达式.

方法1:

var 变量 = /正则表达式/模式修正符;

方法2:

var 变量 = new RegExp('正则表达式','模式修正符');

注意:PHP正则和JS正则的区别.主要是模式修正符不一样.

	JS正则只有三个模式修正符:i.g.m

	i ignore 忽略大小写
	g global 全局匹配模式
	m multiline  多行匹配模式

属性

lastIndex  用于记录上一次匹配到的位置(在非g模式下永远为0)

source	表示正则表达式的字符串

方法:

exec()  进行一次正则匹配

返回结果:数组对象

	第0个元素表示查找到的符合正则的字符串
	index 表示查找到的字符串的起始位置
	input 表示进行正则匹配使用的字符串

test()  进行一次正则测试

	检测结果仅仅返回布尔值,true和false

compile() 重新编译正则对象

	可以重新编译正则对象中原有的规则,修改之后继续使用.