# JavaScript

# 参考资料

# 简介

网景公司里面的两兄弟在两周时间开发的，用来给网页增加动态的交互效果。

1995年面世。

1997年ECMA指定了第一套JavaScript标准，简称ES1，目前的最新标准是ES6。

解释型的弱类型语言。执行在浏览器之上。

# 变量声明

通过var关键字声明局部变量，如果没有使用var则表示是全局变量。

<script>
    var str1 = "hello1"; //定义一个全局变量
    function a() {
      var str2 = "hello2"; //定义一个局部变量
      str3 = "hello3"; //定义一个全局变量
    }
</script>

# 重复声明

//重复声明， js中， 对同名的变量和方法重复声明， 后面的覆盖前面的。就算方法的参数不一致也会。

//重复声明方法
function f1(x) {
    console.log('f1 1111' + x);
}

function f1(x, y) {
    console.log('f1 222' + x);
}

f1(333);


//重复声明变量
var a = '111'
var a = '222'
console.log(a);

# 数据类型

可以通过typeof方法查看数据的类型是什么。

var v1 = 123;
var v2 = 'domain'
console.log('查看变量v1的数据类型:' + typeof (v1))
console.log('查看变量v2的数据类型:' + typeof (v2))

常见的数据类型有以下这些，分为基础类型和引用类型。数组和对象是引用类型。

# 基础类型

number 数值型
boolean 布尔类型：true/false
string 字符串，没有字符类型

// 1. 字符串

var str1 = 'domain';
var str2 = "domain2";
console.log(str1);
console.log(str2);


//2. 数字 
// NaN，非数字。可使用 isNaN(num) 来判断。
// Infinity，无穷大。可使用 isFinite(num) 来判断。
// 
var num = 1;
var num2 = 1.1;
var strnum = '2.2';
var nan = NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
var infinity = Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity



console.log('浮点转整型：' + parseInt(num2))
console.log('字符串转整型：' + parseInt(strnum))
console.log('nan:' + nan);
console.log('infinity:' + infinity);

//3. 布尔值
var b1 = true;
var b2 = 2 > 5;
console.log(b1);
console.log(b2);

null 和undefined

// 4. null 、undefined
// null 表示空，undefined表示未定义
// null 在转换为数字时会转换为0, undefined会转换为 Nan， 转换为布尔值时都会转换为false，
// 通过 `==` 比较， null和undefined是相等的。

// null场景
var none = null;
console.log("定义了一个值为null的变量：" + none);


// undefined 的场景
var i;
console.log("定义变量但未赋值的值为:" + i)
f1();
console.log("没有返回值的方法，默认返回：" + f2());

function f1(x) {
    console.log('定义方法，但未传入要入的参数，那这个参数的值为：' + x)
}

function f2() {
}

# 引用类型

数组
object 对象类型：内置对象，自定义对象

// 5. 引用数据类型

//5. 1 数组

var arrs = [1, 2, 'domain', 'alex'];

console.log('定义数组：' + arrs)

//5. 2 对象
var info = {
    name: 'domain',
    age: 18,
    'sex': '男'
}

console.log('定义了一个对象:' + JSON.stringify(info))


console.log('获取对象中的name:' + info['name'])
info['name'] = 'alex';
console.log('修改对象中的name:' + info['name'])
delete info['name'];
console.log('删除对象中的name:' + JSON.stringify(info))

//新增
info['avatar'] = '头像';
console.log('往对象中新增了头像字段:' + JSON.stringify(info))

# 比较运算符

在js中进行比较时，需要注意：
    ==       比较值相等
    !=       不等于
    ===      比较值和类型相等
    !===     不等于
    ||        或
    &&        且
*/

# 条件判断

// 条件判断， if else ， switch， 和java 一样

var n1 = 1;

if (n1 === 1) {
    console.log("进入if的判断")
} else {
    console.log("进入else的判断")

}

switch (n1) {
    case 1:
        console.log("进入switch的判断")
        break

    default:
        console.log("进入default判断")
        break
}

# 遍历循环

// ## 循环 ， 也和java一样
var arr3 = ["domain", "alex", "joy"]
for (var j = 0; j < arr3.length; j++) {
    console.log("遍历下标和值：" + j + arr3[j]);
}

// 循环下标
for (var value in arr3) {
    console.log('遍历下标:' + value)
}

//循环值
for (var value of arr3) {
    console.log('遍历值:' + value)
}

# 函数

// ##函数


// 无参函数
function f1() {
    console.log('执行无参方法');
}

function f2(x) {
    console.log('执行有参方法:' + x);
}

function f3(x) {
    console.log('执行无返回值方法')
}

function f4(x) {
    console.log('执行有返回值方法')
    return x + 1;
}


f1();
f2();
console.log(f3(1));
console.log(f4(1));


//匿名函数, f5方法接受一个参数， 把一个匿名方法作为参数传入， 然后执行传进来的这个方法。
function f5(x) {
    x();
}


f5(
    function () {
        console.log('我是匿名函数的执行体')
    }
);


//自执行函数， 自动触发执行

(function (x){
    console.log('执行自执行函数:'+x);
})('domain');


// 闭包， 嵌套函数， 函数中嵌套了一个函数，并且返回嵌套的这个函数，这个函数操作的外层函数的变量并返回。
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();




console.log("闭包调用："+add());
console.log("闭包调用："+add());
console.log("闭包调用："+add());

# 序列化

//## 序列化

var user = {
    name:'domain',
    age:18,
    sex:"男"
}

var userJsonStr = JSON.stringify(user);
console.log("json序列化："+userJsonStr);

var user2 = JSON.parse(userJsonStr);

console.log("json 反序列化："+user2['name']);

# this关键字

// ## this, this就是返回当前对象， 在最外层的this， 是windows对象， object中的this就是当前这个object， 类中的this就这个类对象。

var t = this;
console.log("外层的this："+this);

function fun(){
    console.log('方法中的this:'+this);
}

function  f1(){
   return  function (){
        console.log('嵌套方法中的this:'+this);
    };
};

fun();
var f2 = f1();
f2();


var person = {
    firstName  : "John",
    lastName   : "Doe",
    id         : 5566,
    myFunction : function() {
        return this;
    }
};
console.log('object中的this：'+person.myFunction().firstName);

# 类定义

class User{

    constructor(name, url) {
    this.name = name;
    this.url = url;
    this.f = function () {
        return this;
    }
    }

}

var user = new User('domain','www.baidu.com');

console.log('访问类属性：name='+user.name + "   url="+user.url)
var u = user.f();
console.log(u.url);