JS中的数据类型

1. 基本数据类型：String(字符串)，Number(数值)，Boolean(布尔值)，Null(空值)，Undefined(对象)

2. 复杂数据类型：Object(对象)

使用基本数据类型的数据，所创建的变量都是独立的，不能成为一个整体，因此引入了对象的概念，对象属于复合的数据类型，在对象中可以保存多个不同类型的属性。

对象

对象分类

内建对象：

• 在ES标准中定义的对象，在任何的ES实现中都可以使用；
• 比如：Math String Number Boolean Function Object…

宿主对象：

• 由JS的运行环境提供的对象，目前来讲主要是指浏览器提供的对象
• 比如：BOM DOM

自定义兑现：

• 由开发人员自己创建的对象

对象基本操作

• 使用new关键字调用的函数，是构造函数constructor。构造函数就是专门用来创建对象的函数
• 使用typeof检查一个对象时，会返回object
• 在对象中保存的值称为属性
• 向对象添加属性，语法：对象.属性名 = 属性值
• 读取对象中的属性：对象.属性
• 修改对象中的属性值：对象.属性名 = 新值
• 删除独对象中的属性值：delete 对象.属性名

//创建对象
var obj = new Object();
console.log(obj);
obj.name = "孙悟空";
obj.gender = "男";
obj.age = 18;
console.log(obj);
//读取对象的属性
console.log(obj.age);
//修改对象的属性
obj.name = '猪八戒';
//删除对象的属性
delete obj.name

注意：如果读取对象中没有的属性，不会报错，而是会返回undefined

属性名和属性值

• 对象的属性名不强制要求遵守标识符的规范，也就是说可以有属性名叫做var,但是尽量还是不要用
• 如果要使用特殊的属性名，不能采用.的方式来操作，比如说123属性名，而是需要使用另一种方式：语法.对象[“属性名”] = 属性值obj["123"] = 789; console.log(obj["123"]);
• 使用[ ]这种形式去操作属性，更加的灵活，在 [ ]中可以直接传递一个变量，这样变量值是多少就会读取那个属性var n = '123'; console.log(obj['123'])等同于console.log(obj[n])
• 属性值可以是任意的数据类型，甚至也可以是一个对象

in运算符

通过该运算符可以检查一个对象中是否含有指定的属性，如果有则返回true，没有返回false.

检查obj中是否含有test2属性。

console.log("test2" in obj)

基本数据类型和引用数据类型

1. 基本数据类型：String(字符串)，Number(数值)，Boolean(布尔值)，Null(空值)，Undefined(对象)
2. 引用数据类型：Object(对象)

基本数据类型和引用数据类型的区别

基本数据类型的的值都是在栈内存中存储，值与值之间是独立存在的，修改一个变量不会影响到其他的变量。

var a = 123;
var b = a;
a++
console.log(a); //输出值为：124
console.log(b)  //输出值为：123

引用数据类型是保存在堆内存中，每创建一个新的对象，就会在堆内存中开辟一个新的内存空间。而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当通过一个变量修改属性时，另一个也会收到影响。

以下例子为例，变量obj1，obj2存在栈内存中，变量中保存的只是指向堆内存中为对象开辟的内存空间的地址，相当于是个指针，两个变量指向的是同一个堆内存中的内存空间的地址，改变的也都是堆内存中的对象的属性；因此

var obj1 = new Object();
obj1.name = '孙悟空';
var obj2 = obj1;
obj1.name = '猪八戒';
console.log(obj1);  //输出值为：猪八戒
console.log(obj2);  //输出值为：猪八戒

当设置obj2为null时：此时，obj2的指针为null，而obj1的指针仍然存放的是指向对象的堆内存中的内存空间的地址。

var obj1 = new Object();
obj1.name = '孙悟空';
var obj2 = obj1;
obj1.name = '猪八戒';
onj2 = null;
console.log(obj1);  //输出值为：Object
console.log(obj2);  //输出值为：null

基本数据类型：

var a = 10;
var b = 10;
console.log(a==b);//输出true

引用数据类型：每次new(创建)一个对象，都会在堆内存中开辟一个新的空间，因此创建了两次对象，每次占用的空间都是不同的，obj1和obj2变量中存的空间地址也是不一样的，因此两个对象不相等。

var obj1 = new Object();
var onj2 = new Object();
obj1.name = '沙和尚';
obj2.name = '沙和尚';
console.log(obj1 == obj2);//输出false

总结：

1. 当比较两个基本数据类型的值时，就是比较值；
2. 当比价两个引用类型时，比较的是对象的内存地址，如果两个对象一模一样，但是地址不同，也会返回false；

对象字面量

创建一个对象的方法：

1. 使用new关键字（构造函数的方式）：var obj = new Object()
2. 使用对象字面量来创建一个对象：var obj1 = {}; var obj2 = {name:'猪八戒',age:28}

对象字面量的属性名可以加引号(因为属性名本身就是一个字符串)，也可以不加，建议不加，如果要使用一个特殊的名字，则必须加引号

var obj2 = {
    
    
	name:'猪八戒',
	age:28
}
等同于
var obj2 = {
    
    
	'name':'猪八戒',
	'age':28
}

函数

• 函数也是一个对象
• 函数中可以封装一些功能（代码），在需要时可以执行这些功能（）
• 使用typeof检查一个函数对象时，会返回function()

创建一个函数对象：

• 使用一个构造函数创建函数对象：var fun = new Function()
• 使用一个函数声明来创建函数：function 函数名([形参1，形参2...形参N]){ 语句...}；其中[]表示可选的。
• 使用函数表达式来创建一个函数：var 函数名 = function([形参1，形参2...形参N]){语句...}，所谓函数表达式就是创建一个匿名函数，并将这个匿名函数赋值给一个变量

函数的参数

• 可以在函数的（）中指定一个或多个形参，多个形参之间用，隔开，声明形参就相当于在函数内部声明了对应的变量，但是并不赋值function sum(a,b){ console.log(a+b);}
• 在调用函数时，可以在(）中指定实参,实参将会赋值给函数中对应的参数。sum(1,2)
• 调用函数时解析器不会检查实参的类型，而函数的实参可以是任意的数据类型，所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查
• 调用函数时，解析器也不会检查实参的数量，多余的形参不会被赋值；如果实参的数量少于形参的数量，则没有对应的实参的形参将是undefined

函数的返回值

function sum(a,b,c){
    
    
	var d = a + b + c;
	return d;
	alert('hello');
}
var result = sum(1,2,3)

• return后的语句都不会执行，因此alert不会被执行
• 如果return语句后不跟任何值就相当于返回一个undefined
• 如果函数中不写return,则也会返回undefined

实参可以是任意的数据类型，也可以是一个对象，当我们参数过多时，可以将参数封装到一个对象中，然后通过对象传递

function sayHello(name.age,gender,address){
    
    
	console.log("我是"+name,"我今年"+age+"岁了"，"我是一个"+gender+"人"，"我住在"+address);
}
sayHello("猪八戒",28,"高老庄","男");

function sayHello(o){
    
    
	console.log("我是"+o.name,"我今年"+o.age+"岁了"，"我是一个"+o.gender+"人"，"我住在"+o.address);
}
var obj = {
    
    
	name:'猪八戒',
	age:28,
	gender:'男'，
	address:'花果山'
};
sayHello(obj);

实参也可以是一个函数（因为函数本质上来说也是一个对象）

以下例子中将sayHello一个函数当做实参传给了fun,此时，a=function sayHello(o){…}，换句话说，也就是a等于sayHello函数。

function fun(a){
    
    
	console.log('a='+a);
}

function sayHello(name.age,gender,address){
    
    
	console.log("我是"+name,"我今年"+age+"岁了"，"我是一个"+gender+"人"，"我住在"+address);
}

fun(sayHello);

area()和area

area()：调用函数
area：函数对象

function area(r){
    
    
    return  3.14 * r * r;
}
function fun(a){
    
    
	console.log('a='+a);
}
fun(area)//相当于把area这个对象赋给了a,所以输出就为：a = function fun(a){console.log('a='+a);}
fun(area(10))//相当于把函数的返回值作为参数传给a,因此输出为：a=314

fun(area) 相当于把area这个对象赋给了a,所以输出就为：a = function fun(a){console.log(‘a=’+a);}
fun(area(10)) 相当于把函数的返回值作为参数传给a,因此输出为：a=314
打个比方：fun(area)相当于把冰淇淋机给了对方，而fun(area(10)) 相当于把冰淇淋给了对方

return

• break可以退出当前的循环
• continue用于跳过当次循环
• return可以结束整个函数

匿名函数

没有名称的函数称为匿名函数。在代码中直接写匿名函数是会报错的，如果在外面给他加一个括号表示其为一个整体，就不会报错。那么对于匿名函数，如何去调用呢？

一般调用函数的方式：函数对象（）。而匿名函数整体本来就是一个函数对象，只是没有用变量去接收它，而函数对象确实真实存在的，因此只需要在后面加括号即可，这样的函数称为立即执行函数：函数定义完，立即被调用，立即执行函数往往只会执行一次。

(function(){
    
    
 	alert('我是一个匿名函数');
})();

(function(){
    
    
	console.log("a=" + a);
	console.log("b=" + b);
})(123,456);
输出a=123  b=456

方法

对象的属性值可以是任何的数据类型，也可以是个函数

var obj = new Object();
//向对象中添加属性
obj.name = '孙悟空';
obj.age = 18;
obj.sayName = function(){
    
    
	console.log(obj.name);
}
obj.sayName();

如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法，调用函数就称为调用对象的方法。所以sayName为obj的方法，调用sayName时就称为调用obj的sayName的方法。只是名称的区分，没有本质的区别。

枚举对象中的属性

for…in 语句：对象中有几个属性，循环体就会执行几次，每次执行时，会将对象中的一个属性的名字赋值给变量n，所以n为name,age,gender,address.

var obj = {
    
    
	name:'孙悟空',
	age:18,
	gender:'男',
	address:'花果山'
};
for(var n in obj){
    
    
	console.log('属性名：'+n)
	console.log('属性值：'obj[n]);
}

作用域

作用域：是指一个变量的作用域范围

1. 全局作用域：
   直接编写在script标签中的JS代码，都在全局作用域
   全局作用域在页面打开时创建，在页面关闭时销毁
   在全局作用域中有一个全局对象window，代表的是一个浏览器的窗口，由浏览器创建，我们可以直接使用。
   在全局作用域中：创建的变量都会作为window对象的属性保存。var a=10；console.log(window.a) //10,
   在全局作用域中：创建的函数永远都会作为window对象的方法来保存function fun(){console.log('我是fun函数')；} window.fun()
   全局作用域中的变量都是全局变量，在页面的任意部分都可以访问到

2. 变量的声明提前：

   使用var关键字声明的变量，会在所有代码执行之前被声明console.log("a ="+a); var a = 123等同于var a; console.log("a ="+a); a=123;所以结果为undefined；如果声明变量不使用var关键字，则变量不会被提前声明。

3. 函数声明提前：
   使用函数声明形式创建的函数：function 函数名(){}，它会在所有的代码执行之前就被创建，所以可以在函数声明前调用函数。而使用函数表达式创建的函数，只是将变量提前声明了，变量的值为undefined,因此，不可以在函数表达式创建函数之前调用函数。

函数声明：(不会报错)

fun();
function fun(){
    
    
	console.log("我是一个fun函数");
}

函数表达式：(会报错)

fun();
var fun = function(){
    
    
	console.log（"我是一个fun函数"）
}

4. 函数作用域
   调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
   每调用一次函数，就会创建一个新的函数作用域，他们之间是互相独立的
   在函数作用域中可以访问全局作用域中的变量，而在全局作用域中无法访问到函数作用域中的变量
   当在函数作用域操作一个变量时，他会在自身作用域中寻找，如果有就直接使用，没有再向上一级作用域中寻找，直到找到全局作用域，如果全局作用域中依然没有找到，则会报错ReferenceError(引用异常)
   在函数中如果想要直接访问全局作用域，直接在变量前加window，（window.a）
   在函数作用域也有声明提前的特性，使用var关键字声明的变量，会在函数中所有代码执行之前被声明，函数声明也会在函数中所有代码执行之前执行
   在函数中，不使用var声明的变量都会成为全局变量
   定义形参就相当于在函数作用域中声明了变量

var e = 23;
function fun(e){
    
    
//相当于 var e;
	alert(e)
}
fun()

输出undefined

this

解析器在调用函数时每次都会向函数内部传递进一个隐含的参数：this；this本质上是一个参数，跟我们调用函数时传进去的实参一样，只不过this它是由window传进去的。this指向的是一个对象，这个对象我们称为函数执行的上下文对象；根据函数调用方式不同，this会指向不同的对象

function fun(a,b){
    
    
	console.log("a = "+a+", b = "+b);
	console.log(this)//输出全局对象window
}
fun(123,456)

function fun(){
    
    
	console.log("a = "+a+", b = "+b);
	console.log(this)//输出全局对象window
}
var obj = {
    
    
	name:'孙悟空',
	sayName:fun
}
console.log(obj.sayName == fun)//true
obj.sayName();//obj对象
fun();//Window对象

以函数形式调用时，this永远都是window；以方法的形式调用时，this就是调用方法的那个对象

var name = '全局'；
function fun(){
    
    
	console.log(this.name);
}
var obj1 = {
    
    
	name:'孙悟空',
	sayName:fun
}
var obj2 = {
    
    
	name:'沙和尚',
	sayName:fun
}

总结：

• 当以函数的形式调用时，this是window
• 当以方法的形式调用时，谁调用方法this就是谁
• 当以构造函数的形式调用时，this就是新创建的那个对象

使用工厂方法创建对象

function creatPerson(name,age,gender){
    
    
	//创建一个新的对象
	var obj = new Object();
	//向对象中添加属性
	obj.name = name;
	obj.age = age;
	obj.gender = gender;
	obj.sayName = function(){
    
    
	 alert(this.name)
	};
	//将新的对象返回
	return obj
}
var obj1 = createPerson('孙悟空',28,'男');
var obj2 = createPerson('猪八戒',23,'男');
var obj3 = createPerson('沙和尚',18,'男');
obj3.sayName();//沙和尚

构造函数

使用工厂方法创建的对象，使用的构造函数都是Object,所以创建的对象都是Object这个类型，就会导致无法区分多种不同类型的对象，比如：创建人和创建狗，都是Object对象；因此需要构造函数

构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写；
构造函数和普通函数的区别就是调用方式不同，普通函数是直接调用，而构造函数需要使用new关键字来调用

function Person(){
    
    
  alert(this);//this就是新建的对象per2
}
//普通函数调用
var per1 = Person();
console.log(per1);//输出undefined,因为per1接受的是函数Person()的返回值，而Person()没有返回值，所以undefined

//构造函数调用
var per2 = new Person();
console.log(per2);//输出Person(对象)

构造函数的执行流程：

当调用一个构造函数时：

1. 立刻创建一个新的对象：使用了new关键字，在堆内存开辟了一个新的空间去创建对象
2. 将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
3. 逐行执行函数中的代码
4. 将新建的对象作为返回值返回

function Person(name , age , gender){
    
    
	this.name = name ;
	this.age = age ;
	this.gender = gender ;
	this.sayName = function(){
    
    
		alert(this.name);
	}
}

function Dog(){
    
    
}

//构造函数调用
var per1 = new Person('孙悟空',28,'男');
var per2 = new Person('猪八戒',23,'男');
var per3 = new Person('沙和尚',18,'男');
console.log(per1);
console.log(per2);
console.log(per3);

var dog = new Dog()

使用同一构造函数创建的对象，我们称为一类对象，也将构造函数称为一个类。我们将通过一个构造函数创建的对象，称为是该类的实例。如上：per1是Person类的实例，dog是Dog类的实例。

instanceof：可以检查一个对象是否为一个类的实例；语法：对象 instanceof 构造函数；如果是返回true，否则返回false

所有的对象都是Object的后代，所以任何对象和Object做instanceof检查时都会返回trueconsole.log(dog instanceof Object):true。

构造函数修改：

在Person构造函数中，为每个对象都添加了一个sayName方法。构造函数执行一次就会创建一个新的sayName方法，也就是说所有实例的sayName都是唯一的，这样也就导致了构造函数执行一次就会创建一个新的方法，执行10000次就会创建10000个新的方法，而10000个方法都是一样的，这就没有必要了。

//创建一个Person的构造函数
function Person(name , age , gender){
    
    
	this.name = name ;
	this.age = age ;
	this.gender = gender ;
	//向函数中添加一个方法
	this.sayName = function(){
    
    
		alert("大家好，我是"+this.name);
	}
}

var per1 = new Person('孙悟空',28,'男');
var per2 = new Person('猪八戒',23,'男');

per1.sayName();
per2.sayName()；

console.log(per1.sayName == per2.sayName);//false：调用的是每个对象创建的每个相应的方法

既然是一样的方法，只不过被不同的对象调用，那么就可以将该方法在全局作用域中定义

//创建一个Person的构造函数
function Person(name , age , gender){
    
    
	this.name = name ;
	this.age = age ;
	this.gender = gender ;
	//向函数中添加一个方法
	this.sayName = fun;
}

//将sayName方法在全局作用域中定义
function fun(){
    
    
	alert("大家好，我是"+this.name);
}

var per1 = new Person('孙悟空',28,'男');
var per2 = new Person('猪八戒',23,'男');

per1.sayName();
per2.sayName();

console.log(per1.sayName == per2.sayName);//true,调用的是同一个方法

原型对象

将函数定义在全局作用域中，会污染全局作用域的命名空间，而且定义在全局作用域也不是很安全，如果多人开发，很容易出现重名的情况，因此尽量不要在全局作用域中定义函数

原型prototype：我们所创建的函数（所有函数），解析器都会向函数中添加一个属性prototype。每一个函数都有他自己的prototype属性，该属性对应着一个对象，这个对象就是我们所谓的原型对象。如果函数作为普通函数调用，prototype没有任何作用；如果函数以构造函数调用时，他所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，而我们可以通过__proto__来访问该属性

function MyClass(){
    
    
}
var mc = new MyClass();
console.log(MyClass.prototype);
console.log(mc.__proto__);
console.log(mc.__proto__ == MyClass.prototype);//true

原型对象就相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中
当我们访问对象的一个属性或方法时，它会现在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用

function MyClass(){
    
    
}
//向MyClass的原型中添加属性a
MyClass.prototype.a = 123
//向MyClass的原型中添加一个方法(与属性一样的道理)
MyClass.prototype.sayHello = function(){
    
    
	alert('Hello');
}
var mc = new MyClass();
var mc2 = new MyClass();
console.log(mc.a);//123

function MyClass(){
    
    
}
MyClass.prototype.a = 123
var mc = new MyClass();
var mc2 = new MyClass();
//向mc中添加a属性
mc.a = '我是mc中的a'
console.log(mc.a);//我是mc中的a
console.log(mc2.a);//123

因此上节构造函数修改的代码可优化为以下的形式：

function Person(name , age , gender){
    
    
	this.name = name ;
	this.age = age ;
	this.gender = gender ;
}

Person.prototype.sayName = function (){
    
    
	alert("大家好，我是"+this.name);
};

var per1 = new Person('孙悟空',28,'男');
var per2 = new Person('猪八戒',23,'男');

per1.sayName();
per2.sayName();

这种形式更加灵活，如果per2不需要或者跟sayName方法展示的不一样，只需要自己在自己的内部，在创建一个自己需要的sayName方法即可

使用in检查对象中是否有某个属性时，如果对象中没有但是原型中有，也会返回true,可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性

function MyClass() {
    
    
}
MyClass.prototype.name = '我是原型中的名字';
var mc = new MyClass();
console.log('name' in mc) //true
console.log(mc.hasOwnProperty('name'))//false

那么hasOwnProperty()是在哪的呢

console.log(mc.hasOwnProperty('hasOwnProperty'));//false,不在mc中
console.log(mc.__proto__.hasOwnProperty('hasOwnProperty'));//false,不在MyClass的原型中

原型对象也是对象，所以它也有原型

console.log(mc.__proto__.__proto__.hasOwnProperty('hasOwnProperty'));//true

因此hasOwnProperty()方法在MyClass的原型的原型中

原型对象中
当我们访问对象的一个属性或方法时，它会现在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用，如果没有则去原型的原型中寻找，直到找到Objec对象的原型，Object对象的原型没有原型，如果在Object中依然没有找到，则返回undefined

垃圾回收

程序运行过程中也会产生垃圾，这些垃圾积攒过多以后，就会导致运行程序的速度过慢，因此，我们需要一个垃圾回收机制，来处理程序运行过程中的垃圾。

当一个对象没有任何变量或属性来对它进行引用，此时我们将无法操作该对象，那么这种对象就是一个垃圾。这种对象过多就会占用大量的内存空间，导致程序运行变慢。因此，这种垃圾必须被清理。在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作。我们需要做的就是将不再使用的对象设置为Null。

var obj = new Object();
obj = null;