39.对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
js中数据类型
-String
-Number
-Boolean
-Null空值
-undefine 未定义
以上五种属于基本数据类型
-object 对象
基本数据类型都是单一的值“hello” 123 true
值和值之间没有任何的练习
在Js中来表示一个人的信息（name gender age）
var name = "孙悟空";
var gender = "男";
var age =18;
如果使用基本数据类型的数据，我们创建的变量都是独立的，不能成为一个整体。
对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性
对象的分类：
1.内键对象
-由ES标准中定义的对象，在任何的ES的实现中都可以使用
-比如 Math String Number Boolean Function Object
2.宿主对象
-由ES的运行环境提供的对象，目前主要来讲是由浏览器提供的对象
-比如 BOM DOM （console、document）
3.自定义对象
-由开发人员自己创建的对象
*/
</script>
</head>
<body>
</body>
</html>
40.对象的基本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//声明对象
/*
使用new关键字调用的函数，是构造函数
构造函数是专门用来创建对象的函数
使用typeof检查对象类型返回object
*/
var obj = new Object();
/*
在对象中保存的值称为属性
向对象添加属性
语法：
对象.属性名 = 属性值
*/
//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个gender属性
obj.gender = "男";
//向obj中添加一个age属性
obj.age = "18";
// console.log(obj);
//读取对象中的属性
/*
语法：
对象.属性名
*/
/*
修改对象属性的值
语法：
对象.属性名 = 新值
*/
obj.name = "猪八戒";
// console.log(obj.name);
/*
删除对象的属性
语法：
delete 对象.属性名
*/
delete obj.name;
console.log(obj.age);//undefine
</script>
</head>
<body>
</body>
</html>
41.属性名和属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
var obj = new Object();
/*
向对象中添加属性
属性名：
-对象的属性名不强制要求遵守标识符的规范
什么乱七八糟的属性名都可以，但是尽量按照规范使用
如果使用特殊的属性名不能用 对象.属性名的方式
而是采用另一种方式：
语法：
对象 ["属性名"] = 属性值
读取时也需要采用这种方式
使用[]这种操作属性更加的灵活
在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性
*/
// obj.name = "孙悟空";
// obj.var = "hello";
/*
属性值
-js对象的属性值，可以是任意的数据类型
*/
// obj["789"] = 123;
// console.log(obj["789"]);
obj.test = true;
// obj.test = null;
// obj.test = undefined;
console.log(obj.test);
</script>
</head>
<body>
</body>
</html>
42.基本数据类型和引用数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
基本数据类型和引用数据类型
基本数据类型：
String Number Boolean Null Undefined
引用数据类型：
Object
JS中的变量都是保存到栈内存中的，
基本数据类型的值直接在栈内存中存储
值与值之间是独立存在的，修改一个变量不会影响其他的变量
对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间
而变量保存的是对象的内存地址(对象的引用)，如果两个变量保存的是同一个对象引用，
当一个通过一个变量修改属性时，另一个也会受影响
*/
var a = 123;
var b = a;
a++;
// console.log("a = "+a);//a = 124
// console.log("b = "+b);// b = 123
var obj = new Object();
obj.name = "孙悟空";
var obj2 = obj;
// console.log(obj2.name);//孙悟空
var c = 10;
var d = 10;
console.log( c == d );//true
var obj3 = new Object();
var obj4 = new Object();
obj3.name = "沙和尚";
obj4.name = "沙和尚";
/*
当比较两个基本数据类型的值时，就是比较值
而比较两个引用数据类型时，它是比较的对象的内存地址
如果两个对象是一模一样的，但是地址不同，它也会返回false
*/
console.log(obj3 == obj4);//fasle
</script>
</head>
<body>
</body>
</html>
43.对象字面量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//创建一个对象
var obj = new Object();
/*
使用对象字面量来创建一个对象
*/
var obj = {
};
// console.log(typeof obj);
obj.name = "孙悟空";
console.log(obj.name);
/*
使用对象字面量，可以在创建对象时，直接指定对象中的属性
语法：{属性名：属性值,属性名：属性值.....}
对象字面量的属性名可以加引号也可以不加，
如果要使用一些特殊的名字，则必须加引号
属性名和属性值使一组一组的名值对结构
名和值之间使用 : 连接，多个名值对之间使用,隔开
如果一个属性之后没有其他的属性了，就不要写，
*/
var obj2 = {
name:"猪八戒",
age:28,
gender:"男",
test:{
name:"沙和尚"}
};
console.log(obj2);
</script>
</head>
<body>
</body>
</html>
44.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
函数
-函数也是一个对象
-函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
-函数可以保存一些代码在需要的时候调用
-使用typeof检查一个函数对象时，会返回function
*/
//创建一个函数对象
//可以将要封装的代码以字符串的形式传递给构造函数
//我们在实际开发中很少使用构造函数来创建一个新的函数对象
//var fun = new Function("console.log('Hello 这是我的第一个函数')");
//封装到函数中的代码不会立即执行
//函数中的代码会在函数调用的时候执行
//调用函数语法：函数对象（）
//当调用函数时，函数中封装的代码会按照顺序执行
// fun();
/*
使用函数声明来创建一个函数
语法：
function 函数名([形参1,形参2...形参N]){
语句..
}
*/
function fun2(){
console.log("这是我的第二个函数~~");
alert("哈哈哈哈");
document.write("~~~~(>_<)~~~~~~~~");
}
//console.log(fun2);
//调用fun2
//fun2();
/*
使用函数表达式来创建一个函数
var 函数名 = function([形参1,形参2...形参N]){
语句...
}
*/
var fun3 = function(){
console.log("我是匿名函数中封装的代码！");
}
fun3();
</script>
</head>
<body>
</body>
</html>
45.函数的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
定义一个用来求两个数的和的函数
可以在函数的()中来指定一个或多个形参（形式参数）
多个形参之间使用,隔开，声明形参就相当于在函数内部声明了对应的变量
但是并不赋值
*/
function sum(a,b){
console.log(a + b);
}
/*
在调用函数时，可以在（）中指定实参（实际参数）
实参将会赋值给函数中对应的形参
*/
// sum(1,2);
// sum(123,456);
/*
调用函数时解析器不会检查实参的类型，
所以要注意，是否有可能会接受到非法的参数，如果有可能则需要对参数进行类型的检查
函数的实参可以是任意的数据类型
*/
/*
调用函数时，解析器也不会检查实参的数量
多余实参不会被赋值
如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
*/
function sum(a,b){
console.log(" a = " + a);
console.log(" b = " + b);
console.log(a + b);
}
/*
在调用函数时，可以在（）中指定实参（实际参数）
实参将会赋值给函数中对应的形参
*/
</script>
</head>
<body>
</body>
</html>
46.函数的返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
创建一个函数，用来计算三个数的和
可以使用return 来设置函数的返回值
语法：
return值
return 后的值将会作为函数的执行结果返回
可以定义一个变量来接收该结果
在return后面的语句都不会执行
如果return语句后不跟任何值就相当于返回一个undefined
如果函数中不写return 则也会返回undefined
return 后可以跟任意类型的值
*/
function sum(a,b,c){
// alert(a + b + c);
var d = a + b + c;
return d;
}
//调用函数
//变量result的值就是函数的执行结果
//函数返回什么result的值就是什么
var result = sum(4,7,8);
console.log(result)
</script>
</head>
<body>
</body>
</html>
47.返回值练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
定义一个函数，判断一个数字是否是偶数，如果是返回true,否则返回false
*/
function isOu(num){
return num % 2 == 0
}
var result = isOu(15);
console.log("result = " + result);
/*
定义一个函数，可以根据半径计算一个圆的面积，并返回计算结果
*/
function mainji(r){
return 3.14*r*r;
}
result = mainji(5);
//console.log(result);
/*
创建一个函数，可以在控制台中输出一个人的信息
可以输出人的name age gender address
实参可以是任意的数据类型，也可以是一个对象
当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递
*/
function sayHello(o){
console.log("我是"+o.name+",今年我"+o.age+"岁,"+"我是一个"+o.gender+"人"+ ",我住在"+ o.address);
}
// sayHello("孙悟空",18,"男","花果山");
//创建一个对象
var obj = {
name : "孙悟空",
age:18,
gender:"男",
address:"花果山"
}
//sayHello(obj);
/*
实参可以是一个对象，也可以是一个函数
*/
function fun(a){
// console.log(" a = " +a);
a(obj);
}
fun(sayHello);
/*
mianji()
-调用函数
-相当于使用的函数的返回值
mianji()
-函数对象
-相当于直接使用函数对象
*/
</script>
</head>
<body>
</body>
</html>
48.返回值的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function fun(){
alert("函数要执行了~~~~");
for(var i = 0; i < 5; i++){
console.log(i);
if( i == 2){
//使用break可以退出当前的循环
//break;
//continue用于跳过当次循环
//continue
//使用return可以结束整个函数
//return
}
}
alert("函数执行完了~~");
}
fun();
/*
返回值可以是任意的数据类型
也可以是一个对象,也可以是一个函数
*/
function fun2(){
var obj = {
name:"沙和尚"};
return obj;
}
var a = fun2();
console.log(" a = " + a.name );
</script>
</head>
<body>
</body>
</html>
49.立即执行的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
立即执行函数
函数定义完，立即被调用，这种函数叫做立即执行函数
立即执行函数往往只会执行一次
*/
(function(a,b){
//alert("我是一个匿名函数！")
console.log("a = " +a);
console.log(" b = "+b);
})(123,456);
</script>
</head>
<body>
</body>
</html>
50.js基础方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
创建一个对象
*/
var obj = new Object();
//向对象中添加属性
obj.name = "孙悟空";
obj.age = 18;
//对象属性值可以是任何的数据类型，也可以是个函数
obj.sayName = function(){
console.log(obj.name);
};
function fun(){
console.log(obj.name);
}
//调方法
obj.sayName();
//调函数
fun();
/*
函数也可以称为对象的属性，
如果一个函数作为一个对象的属性保存，
那么我们称这个函数时这个对象的方法
调用这个函数就说调用对象的方法（method）
但是它只是名称上的区别没有其他的区别
*/
// console.log();
var obj2 = {
name:"猪八戒",
age:18,
sayName:function(){
console.log(obj2.name);
}
};
obj2.sayName();
</script>
</head>
<body>
</body>
</html>
51.枚举对象中的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
var obj = {
name:"孙悟空",
age:18,
gender:"男",
address:"花果山",
sex:"女"
}
var obj2 = {
hight:"180",
weight:"75",
width:"45"
}
//枚举对象中的属性
//使用for...in语句
/*
语法：
for(var 变量 in 对象){
}
for...in语句 对象中有几个属性，循环体就会执行几次
每次执行时，会将对象中的一个属性的名字赋值给变量
*/
for(var n in obj){
console.log(obj[n]);
}
for(var n in obj2){
console.log(obj2[n]);
}
</script>
</head>
<body>
</body>
</html>
52.全局作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
作用域
-作用域指一个变量的作用范围
-在JS中一共有两种作用域：
1.全局作用域
-直接编写在script标签中的JS代码，都在全局作用域
-全局作用域在页面打开时创建，在页面关闭时销毁
-全局作用域中有一个全局对象windos，
它代表的是一个浏览器的窗口，它由浏览器创建，我们可以直接使用
-在全局作用域中，
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
-全局作用域中的变量都是全局变量
在页面的任意的部分都可以访问的到
2.函数作用域
-
*/
var a = 10;
var b = 10;
// var b = "hello";
// console.log(window.b);
function fun(){
console.log("我是fun函数");
}
// window.fun();
window.alert(fun());
</script>
</head>
<body>
</body>
</html>
53.变量的声明提前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
变量的声明提前
-使用var关键字声明的变量，会在所有的代码执行之前被声明(但是不会赋值)
但是如果声明变量时不适用var关键字，则变量不会被声明提前
函数的声明提前
-使用函数声明形式创建的函数function 函数(){}
它会在所有的代码执行之前就被创建，所以我们可以在函数声明前调用
使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用
*/
// console.log("a = " + a);
// var a = 123;
//fun();//函数声明之前调用成功
//fun2();
//函数声明，会被提前创建
function fun(){
console.log("我是一个fun函数");
}
//函数表达式，不会被提前创建
var fun2 = function(){
console.log("我是fun2函数");
};
//fun2();
</script>
</head>
<body>
</body>
</html>
54.函数的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
函数作用域
-调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
-每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
-在函数作用域中可以访问到全局作用域的变量,
在全局作用域中无法访问到函数作用域的变量
-当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
如果没有则向上一级作用域中寻找,直到找到全局作用域
如果全局作用域中依然没有找到，则会报错
-在函数中要访问全局变量可以使用window对象
*/
//创建一个变量
var a = 10;
function fun(){
//var a = "我是函数中的变量a";
var b = 20;
console.log(" a = " + a );
}
fun();
console.log("b = "+ b );//访问不了
</script>
</head>
<body>
</body>
</html>