shangrila-xiu

112
文章
101
分类
33
标签

js_对象

javascript对象的讲解

学习对象的前提：1、编程思想：把一些生活做事的经验融入到程序中；2、面向过程：凡是都要亲力亲为，每件事的具体过程要知道，注重的是过程；3、面向对象：根据需求，找对象，注重的是结果。

面向对象的特性：封装、继承、多态。

js不是面向对象的语言，但可以模拟面向对象的思想；它是一门基于对象的语言，（直接就有对象，只需要去使用。）

什么是对象？看得见，摸得着，具体特指的某个东西。
1
2
3
4
5
6
1、对象或实例就像在日常生活中所看到的各个物体。
2、属性或字段是用来描述对象的特质。
3、方法是用来执行对象的动作。
4、事件是在某些情况下发出的特定信号警告。
5、类是对象的分类
对JavaScript来说，对象是属性、方法与事件的集合，代表某个东西。

如何验证变量是不是对象？

1
2
3
console.log(Array instanceof Object);//true
var obj={};
console.log(obj instanceof Object);//true
找对象：描述找对象。

创建对象的三种方式：

1
2
3
1、调用系统的改造函数创建对象：var 变量名=new 对象名();//实例化对象
2、自定义构造函数创建对象（结合第一种，工厂模式创建对象）
3、字面量的方式创建对象

一、调用系统的构造函数创建对象完整的步骤如下几步：

1、创建对象

1
var obj=new Object();//实例化对象

2、添加属性——如何添加属性？—-对象.名字=值;

1
2
obj.name="小苏";
obj.age=17;

3、如何添加方法？——-对象.名字=函数;

1
2
3
4
5
6
obj.eat=function(){
	console.log("哈哈哈哈，好吃");
}
obj.play=function (){
	console.log("去泰山");
}

4、调用函数

1
2
3
4
console.log(obj.name);
console.log(obj.age);
obj.eat();
obj.play();

二、1字面量的创建对象的方法

1、字面量的方式创建对象

1
var obj={};//空对象

2、添加属性和方法

1
2
3
4
5
obj.name="哈哈";
obj.age=20;
obj.sayHi=function (){
	console.log("你好啊,我是"+obj.name+",已经"+obj.age);
};

3、调用方法

1
obj.sayHi();

优化后的写法是

1
2
3
4
5
6
7
8
var obj2={
	name:"小明",
	age:20,
	sayHi:function(){
		console.log("你好啊,我是"+obj2.name+",已经"+obj2.age);
	}
};
obj2.sayHi();

二、2工厂模式创建对象

1
2
3
4
5
在当前对象的方法中，可以访问当前的这个对象的属性的值
					可以使用this代替对象
如何获取该对象是不是属于什么类型？
答：
	变量 instanceof 类型的名字-------boolean类型的结果

1、创建对象

1
var person=new Object();

2、添加属性和方法

1
2
3
4
5
6
7
person.name="哈哈";
person.age=13;
person.sayHi=function (){
//在当前对象的方法中，可以访问当前的这个对象的属性的值
	console.log("您好啊"+"我叫"+person.name);
};
person.sayHi();//调用函数

如何一次性创建多个对象？把创建的对象封装在一个函数中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function createObject(name,age){
	var obj=new Object();//创建对象
	//添加属性
	obj.name=name;
	obj.age=age;
	//obj.name="白白";
	//obj.age=10;
	//添加方法
	obj.sayHi=function (){
		console.log("大家好！我叫"+this.name+"，我今年"+this.age+"岁了");
	};
	return obj;
} 	
//创建人的对象
var per1=createObject ("小芳",19);
per1.sayHi();
var per2=createObject ("花街",29);
per2.sayHi();

设置和获取属性的另外一种方法:

对象名[“属性名”]=”值”;

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name,age){
		this.name=name;
		this.age=age;
		this.play=function(){
			console.log(this.name+"今天去玩； ");
		}
	}
	var obj=new Person("小明",29);
	//obj.play();
	///obj.name="花然";
	obj["name"]="轩名";//这是另外一种方式
	console.log(obj.name);
	//console.log(obj.age);

三、自定义构造函数创建对象*

函数和构造函数的区别：
1
2
构造函数的名字的首字母是不是大写，首字母大写，是自定义创建对象
		调用是一样的

自定义构造函数创建对象的实现步骤:———–>自定义构造函创建对象：先定义一个构造函数，再创建对象，

1
2
3
4
5
6
7
8
9
function Person(name,age){
	this.name=name;
	this.age=age;
	this.sayHi=function (){
		console.log("大家好，我叫"+this.name+"我今年"+this.age+"岁了");
	};
}
var p=new Person("明明",20);
p.sayHi();

自定义构造函数创建对象的原理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1、在内存中开辟空间，存储创建的新的对象
2、把this设置在当前的对象
3、设置对象的属性和方法的值
4、把this对象返回
内存空间：
	堆里面放的是对象：
		var stu=new Object();
		stu.name="白白";
		stu.age=15;
		stu.study=function(){
		console.log("我是一名学生，今天满课"+"我叫"+this.name);
	栈里面是堆的空间的地址
	（地址在栈中，对象在堆中）

json格式的数据

1
2
var sex=true;
console.log(sex?"男":"女");//男

对象：有属性和方法，特指的某个事物；一组无序属性的集合，属性的值可以是任意的类型

json格式的数据：一般都是成对的，是键值对；json也是一个对象，数据都是成对出现的，一般json的数据无论是键还是值，都是用双引号括起来的。

以前创建对象：

1
2
3
4
5
var obj={
	name:"哗然",
	age:10,
	sex:"男"
};

json对象

1
2
3
4
5
6
7
8
9
var json={
	"name":"画画",
	"age":"10",
	"sex":"男",
};
//console.log(json.name);//可以获取到
//console.log(json["name"]);//可以获取到
var key="name";
console.log(json[key]);

遍历数组

1
2
3
4
var arr=[10,20,30];
for(var i=0;i<arr.length;i++){
	console.log(arr[i]);
}

遍历对象：是不能用for循环遍历的，但是可以用for-in循环

1
2
3
4
5
6
7
8
9
//key是一个变量，存储的是该对象的所有属性的名字
/*for(var key in json){
	console.log(key);//对象的属性的名字
	console.log(json.key);//undefined
	console.log(json[key]);//属性的值
}*/
for(var key in json){
	console.log(key+"-----------"+json[key]);
}

字面量创建对象的缺陷

1
2
3
4
5
6
7
8
9
10
11
12
13
<meta charset=utf-8>
<script>
//字面量创建对象的缺陷:一次性的对象
var obj={
	name:"话",
	age:20,
	sayHi:function(){
		console.log("你好啊,我是"+obj.name+",已经"+obj.age);
	}
};
obj.name="张三";
console.log(obj.name);
</script>

总结对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
实例化对象：通过构造函数创建出来的实例化对象。必须通过实例对象调用。
静态对象：不需要创建，直接就说一个对象，方法（静态方法），直接通过这个对象的名字调用的。必须由大写的对象调用。
//点语法：
            对象.名字=值;
            对象.名字=函数;
           对象["属性名字"]=值;
*/
/**
js是一门什么样的语言？
	是一门解释性的语言，
	是一门脚本语言
	是一门弱类型的语言，声明变量都var
	是一门基于对象的语言
	是一门动态类型的语言
		1、代码（变量）只有执行到这个位置的时候，才知道这个变量中到底存储的是什么，如果是对象，就有对象的属性和方法；如果是变量，就是变量
		2、对象什么都没有，通过点语法，那么就可以为对象添加属性和方法
*/
/*
对象获取属性的值得写法：
		对象.属性
		对象["属性"]
*/
/**遍历对象
for(var key in 对象){}
	//key数一个变量，这个变量中存储的数遍历的对象的属性的名字
*/
原始数据类型：number,boolean,string,null,undefined,object
基本类型（简单类型，值类型）：number,boolean,string
复杂类型（引用类型）：object
空类型：null,undefined
基本类型的值在栈上
引用类型的值在堆上，地址（引用）在栈上存储
值类型之间传递的是值
引用类型之间传递的引用（地址）
对象分为三种：内置对象，自定义对象，浏览器对象
内置对象：系统提共
Math
Date
String
Array
Object
自定义对象：自己定义的
浏览器对象：浏览器的对象
Math是一个对象，但不是一个函数，Math对象下的方法和属性都是静态的
方法：
    Math.PI圆周率的值
    Math.E常数的底数
    Math.abs(值);求绝对值
    Math.floor(值);向下取整
    Math.ceil(值);向上取整
    Math.max();一组数据中的最大值
    Math.min();一组数据中的最小值
    Math.random();随机数
    Math.sqrt();开方
    Math.pow();方根，一个数的多少次幂
new 的执行过程：------》new的时候，系统做了什么事？
	1、开辟空间，存储创建的新对象
	2、把this设置为当前的对象
	3、设置属性和方法的值
	4、返回当前新的对象