『笔记』JavaScript基础学习笔记 2

对象

JS中的数据类型

基本数据类型都是单一的值，值和值之间没有任何联系

在JS中用来表示一个人的信息（name gender age）

var name="张三";
var gender="男";
var age="18";

如果使用基本数据类型，创建的变量都是独立的，不能成为一个整体

对象属于一种复合的数据，在对象中可以保存多个不同数据类型的属性

一、对象的分类

1、内建对象

2、宿主对象

console.log();
document.write(); 
//都是由浏览器提供

3、自定义对象

二、创建对象

1、 使用 new 关键字调用的函数，是构造函数constructor
2、 构造函数是专门用来创建对象的函数
3、 使用typeof来检查一个对象时，会返回object

var obj = new Object();
//console.log(typeof obj);
//向obj添加一个name属性
obj.name="张三";
//向obj添加一个gender属性
obj.gender="男";
//向obj添加一个age属性
obj.age="18";

console.log(obj);

var obj = new Object();
//向obj添加一个name属性
obj.name="张三";
//向obj添加一个gender属性
obj.gender="男";
//向obj添加一个age属性
obj.age="18";

console.log(obj.name);//输出“张三”

var obj = new Object();
//向obj添加一个name属性
obj.name="张三";
//向obj添加一个gender属性
obj.gender="男";
//向obj添加一个age属性
obj.age="18";

//修改obj的name属性值
obj.name="孙悟空"
console.log(obj.name);//输出“孙悟空”

var obj = new Object();
//向obj添加一个name属性
obj.name="张三";
//向obj添加一个gender属性
obj.gender="男";
//向obj添加一个age属性
obj.age="18";

//删除obj的name属性值
delete obj.name;
console.log(obj.name);//没有该值，输出undefined

三、属性名和属性值

1、属性名

• 对象的属性名不强制要求遵守标识符的规范
• 尽量按照标识符的规范设置

var obj = new Object();
obj["123"]=567;
obj["nihao"]="你好";

var n = "nihao"

console.log(obj["123"]);
console.log(obj[n]);

2、属性值

JS对象的属性值，可以是任意的数据类型， 甚至也可以是一个对象

var obj = new Object();
obj.name="孙悟空";
obj.test= true;
obj.test= null;
obj.test= undefined;

var obj2 = new Object();
obj2.name="猪八戒";

obj.test=obj2;

console.log(obj.test);//返回 name=“猪八戒”
console.log(obj.test.name);//返回 “猪八戒”
console.log("name" in obj);//返回true

四、基本、引用数据类型

（一）基本数据类型

String Number Boolean null Undefined

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

（二）引用数据类型

对象：Object

var obj = new Object();
obj.name = "孙悟空";
var obj2 = obj;
console.log(obj.name);//输出 孙悟空
console.log(obj2.name);//输出 孙悟空
//修改obj的name属性
obj.name = "猪八戒";
console.log(obj.name);//输出 猪八戒
console.log(obj2.name);//输出 猪八戒
obj2 = null;
console.log(obj);//输出 Object
console.log(obj2);//输出 null

var a = 10;
var b = 10;
console.log(a == b); // 返回true

var obj3 = new Object();
var obj4 = new Object();
obj3.name = "沙和尚";
obj4.name = "沙和尚";
console.log(obj3 == obj4); // 返回false

五、对象字面量

使用对象字面量，可以在创建对象时，直接指定对象的属性
语法： {属性名:属性值,属性名:属性值....}

//创建一个对象
//var obj = new Object();

//使用对象字面量来创建一个对象
var obj = {};
obj.name = "孙悟空";

var obj2 = {
  name:"猪八戒",
  age:28,
  gender:"男"
  test:{
    name:"沙和尚",
    age:27
  }
};
console.log(obj2.test);//输出name:沙和尚 age:27

函数

一、函数的简介

函数（function）：也是一个对象

1、使用构造函数的方式来创建函数

var fun = new Function(
  "console.log('这是我的第一个函数');"
);
fun.hello = "你好";
console.log(fun.hello);//输出 你好
fun();//输出 这是我的第一个函数

2、使用函数声明来创建一个函数

语法：
中括号可选，可不写

function 函数名([形参1，形参2，形参n]){
  语句...
}

function fun2(){
  console.log("这是我的第二个函数");
  alert("哈哈哈哈");
  document.write("你好");
}
fun2();//按顺序输出3个函数

3、使用函数表达式来创建一个函数

语法：

var 函数名 = function([形参1,形参2,形参n]){
  语句...
}

将一个匿名函数赋值给一个变量

var fun3 = function (){
  console.log("这是一个匿名函数");
}
fun3();

二、函数的参数

1、形参与实参

可以在函数的()中来指定一个或多个形参（形式参数）

function sum(){
  var a = 1;
  var b = 1;
  console.log(a+b);
}
sum(); // 输出 求和值2

//a,b都是形参
function sum (a,b){ 
  cosole.log(a+b+c);
}
//1,2都是实参，实参可以是任意数据类型
sum(1,2);//输出 求和值3
//3没有对应的形参，将变为undefined
sum(1,2,3);//输出 求和值null

2、函数的返回值

可以使用return来设置函数的返回值
语法： return 值

function sum(a,b,c){
  // alert(a+b+c);
  var d = a+b+c;
  return d;
  //return;
  alert("hello");
}
//调用函数
// sum(1,2,3)
//变量result的值就是函数的执行结果
//函数返回什么result的值就是什么
var result = sum(4,7,8);
console.log("result="+result);//输出 求和值19

3、实参的类型

例1： 定义一个函数，判断一个数字是否为偶数，如果是返回true，否则返回false

function isOu(num){
  if(unm % 2 == 0){
    return true;
  }else{
    return false;
  }
  //相等于上面的式子
  return num % 2 == 0 ;
}

var result = isOu(2);
console.log("result = "+result);//输出true

例2： 定义一个函数，可以根据半径计算一个圆的面积，并返回计算结果

function mianji(r){
  return 3.14*r*r;
}

var result = mianji(10);
console.log("result = "+result);//输出314

例3： 创建一个函数，可以在控制台输出一个人的信息

实参可以是任意的数据类型，也可以是一个对象

• 当参数过多时，可以将参数封装到一个对象中，然后通过对象传递

function sayHello(o){
  console.log("我是"+o.name+",今年我"+o.age+"岁了，"+"我是一个"+o.gender+"人，我住在"+o.address);
}
//创建一个对象
var obj = {
  name:"孙悟空",
  age:18,
  address:"花果山",
  gender:"男"
};

sayHello(obj);

例4： 实参可以是一个对象，也可以是一个函数

function sayHello(o){
 console.log("我是"+o.name+",今年我"+o.age+"岁了，"+"我是一个"+o.gender+"人，我住在"+o.address);
}
//创建一个对象
var obj = {
 name:"孙悟空",
 age:18,
 address:"花果山",
 gender:"男"
};
function fun(a){
 console.log("a = "+a);//输出sayHello整个函数
 a(obj);//输出sayHello(obj);的结果
}
fun(sayHello);
fun(sayHello());//输出函数sayHello的返回值

4、返回值的类型

function fun(){
  alert("函数要执行了")；
  for(var i=0; i<5; i++){
    console.log(i);
    if(i == 2){
      break;//break可以退出当前循环
      continue;//用于跳过当次循环
      return;//可以结束整个函数
    }
    console.log(i);
  }
  alert("函数执行完了");
}
fun();

function fun2(){
  //var obj = {name:"沙和尚"};
  //return obj;
  return {name:"沙和尚"};
}
var a = fun2();
console.log("a="+a.name);

function fun3(){
  //在函数内部再声明一个函数
  function fun4(){
    alert("我是fun4");
  }
  //fun4();
  return fun4;//fun4函数作为返回值返回
  return fun4();
}
//a = fun3();
//console.log(a);
//a();
fun3()();

5、立即执行函数

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

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

6、对象的方法

对象的属性值可以是任意数据内心，也可以是一个函数

var obj = new Object();
obj.name = "孙悟空";
obj.age = 18; 
obj.sayName function(){
  console.log(obj.name);
};
function fun(){
  console.log(obj.name);
}
//console.log(obj.sayName);
//调用obj的sayName方法
obj.sayName();
//调用函数
fun();

var obj2 = {
  name:"猪八戒",
  age:18,
  sayNme:function(){
    console.log(obj2.name);
  }
};
obj2.sayName();

7、枚举对象中的属性

使用 for...in 语句来枚举对象中的属性

语法：

for(var 变量 in 对象){
}

var obj = {
  name:"孙悟空",
  age:18,
  gender:"男",
  address:"花果山"
};
//[]可以传变量
for(var n in obj){
  console.log("属性名:"+n);
  console.log("属性值:"+obj[n]);
}

三、作用域

（一）全局作用域

function fun(){
  var a = 123;
}
fun();
console.log(a);//报错


var a = 10;
var b = 20;
var c = "hello";
console.log(window.c);//输出hello

function fun(){
  console.log("我是fun函数");
}
window.fun();//与下面效果相同
fun();

1、变量的声明提前

var a;
console.log("a = "+a);
var a = 123;

2、函数的声明提前

var fun();//已经赋值
fun();//输出我是fun函数
var fun2;//没有赋值
fun2();//报错，不存在fun2()函数

//函数声明，会被提前创建
function fun(){
  console.log("我是fun函数");
}

//函数表达式，不会被提前创建
var fun2 = function(){
  console.log("我是fun2函数");
}

（二）函数作用域（区域作用域）

var a = 10;
function fun(){
  var a = "我是函数中的变量a";
  var b = 20;
  //console.log("a = "+a);
  function fun2(){
    console.log("a = "+window.a)；
  }
  fun2();
}
fun();
console.log("a = "+a);

在函数作用域中也有声明提前的特性

function fun3(){
  fun4();
  console.log(a);
  var a = 35;
  function fun4(){
    alert("我是fun4");
  }
}
fun3();

var c = 33;
function fun5(){
  console.log("c = "+c);
  var c = 10;
  //没有var关键字，则会变为全局变量，相当于window.d
  d = 100;
}
fun5();
//在全局输出c
console.log("d = "+d);

//定义形参就相当于在函数作用域中声明了变量
function fun6(e){
  alert(e);
}
fun6();

四、debug

alert(c);
var a = 10;
var b = "hello";
c = true;
function fun(){
  alert("hello");
}
var d = 35;

使用浏览器F12检查功能进行debug检查