JavaScript（变量和函数）——笔记整理0508

一、概念

JavaScript 是脚本语言，可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

特点： 轻量级、很容易使用。
js 的注释:

单行注释： // ctrl+/
多行注释： /**/ ctrl+shift +/

二、js如何嵌入到网页里面

1.内嵌（在head或者body里面内嵌都是可以的，要注意代码是否可能会报错）

<script type="text/javascript">
        /*
         * 写执行代码
         * */
</script>

2.外部引入 (在head或者body里面引入外部文件)，src 里面写 js 文件的地址

<script type="text/javascript" src="js/index.js"></script>

三、js里面的基础语法——变量和常量

注意：
js 语法严格区分大小写。
js 字面量的分类：
分为变量和常量，变量是指存放可变化值的量，常量是指存放不可变化值的量。
js 如何定义字面量：
关键字 var ：这个关键字可以定义任意类型的变量，和常量。
定义规则：
var 名称=值；
命名规则：
以字母开头，或者$ _开头（一般不建议使用）；
严格区分大小写 (可以使用驼峰命名，也可以使用帕斯卡命名)。
输出变量到控制台：

console.log()；

1、定义变量

只定义变量，不赋值，控制台会输出空值 undefined

var username;
console.log(username);   //空值 undefined

js里面要注意在使用变量之前先定义变量，再初始化。
变量在没有赋值的情况下会报错。

var username1 = 10;
console.log(username1);   // 10

js里面定义多个变量：

var a, b, c;
console.log(a, b, c);   //undefined undefined undefined

var a1=10,b1=20,c1=30;
console.log(a1,b1,c1);    // 10 20 30

2、变量的数据类型

1、值类型：number 数字型、boolean 真假（true/false）、string 字符串类型、undefined 未定义类型、null 空值

值类型——存储在栈里面的、使用空间固定、复制的是本身

undefined 表示变量没有被赋值
null 空值

2、引用类型：object 对象型、array 数组、function (js函数)

引用类型——存储在堆上的、使用空间不固定、使用指针来引用、复制该元素复制的是引用类型的指针

3、检测变量的数据类型

检测值类型 typeof

var num=10;
var bool=true;
var str="abc";
var not=undefined;
var noval=null;
var obj={};

console.log(typeof num);  //number
console.log(typeof bool); //boolean
console.log(typeof str);  //string
console.log(typeof not);  //undefined
console.log(typeof noval); //object
console.log(typeof obj);  //object

检测引用类型 instanceof

var method=function (){}

console.log(typeof method);  //function   检测值类型
console.log(method instanceof Function);   //true    检测引用类型

4、js里面定义变量写var 和不写var 的区别

• js 里边的变量有作用域之分，分为 全局变量 和 局部变量，全局变量在任何地方可以使用，局部变量只能在当前作用域内部使用。
• js 里边定义变量可以不写关键字，如：password = "abc12345";，不写关键字声明的变量为全局变量。

js 里边定义变量写var和不写var的实际区别：

使用var声明的变量 不可删除
不使用var声明的变量 可删除

var m1 = 10;
m2 = 20;
   
console.log(Object.getOwnPropertyDescriptor(window, "m1"));
//{value: 10, writable: true, enumerable: true, configurable: false}
console.log(Object.getOwnPropertyDescriptor(window, "m2"));
//{value: 20, writable: true, enumerable: true, configurable: true}

delete m1;  //使用var声明的变量 不可删除
delete m2;  //不使用var声明的变量 可删除
    
console.log(m1);   //10
console.log(m2);  //Uncaught ReferenceError: m2 is not defined

由于js里边定义的变量全部属于window，所以在window里边获取变量属性值

5、js 声明变量提前

我们习惯将var a = 2;看做是一个声明，而实际上javascript引擎并不这么认为。它将var a和a = 2看做是两个单独的声明，第一个是编译阶段的任务，而第二个则是执行阶段的任务。

这意味着无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理，可以将这个过程形象地想象成所有的声明（变量和函数）都会被“移动”到各自作用域的最顶端，这个过程被称为提升。

举例：

console.log(number);  //undefined
var number = 100;

他的实际执行顺序是：

    var number;
    console.log(number);  //undefined
    number = 100;

再看下边的例子：

	a = 1;
	var a;
	console.log(a); //1

输出的结果并不是我们想的undefined，而是1，这里要注意，变量的声明提前。

下边是一个面试题：

console.log(v1);  //undefined
var v1 = 100;
function foo() {
    console.log(v1); //undefined
    var v1 = 200;
    console.log(v1);  //200
}
foo();
console.log(v1);  //100

6、变量的生命周期

全局变量的生命周期：从定义开始——当前网页关闭之后结束
局部变量的生命周期：从定义开始——当前函数执行完成之后结束

7、变量声明同名的问题

var data = 10;
function getdata() {
    console.log(data);  //undefined   考虑提前声明
    var data = 20;
    console.log(data);  //20   局部变量
}
getdata();

8、常量

值不能发生变化
es5 里边定义常量 var
es6 let（定义变量） const（ 常量）

四、js里边的函数

概念：函数是由事件驱动或者被调用执行的 重复 代码块
关键字： function
定义规则： function 名称(){}
执行函数：函数名称();

1、函数的类型

常规函数、匿名函数、自执行函数
常规函数： 常规函数也存在声明提前

//声明提前
fun();
console.log(fun);
console.log(typeof fun);  //function
console.log(fun instanceof Function);  //true

function fun() {
    /*
     * 函数内部写的是可执行代码
     * */
    console.log("该函数被调用");
}

//执行函数
fun();

匿名函数： 没有名称的函数，匿名函数不存在声明提前

console.log(fun1);  //undefined  变量的声明提前
fun1();             //Uncaught TypeError: fun1 is not a function


var fun1 = function () {
    /*
     * 函数内部写的是可执行代码
     * */
    console.log("匿名函数执行");
};

fun1();

自执行函数： 也就是匿名函数

(function () {
    /*
     * 函数内部写的是可执行代码
     * */
    console.log("自执行函数执行");
})();

2、函数的参数问题

参数分为形参和实参（传入的值），形参的类别、个数不定，可以根据自己的需求；
函数的形参是用 “，”将名称隔开。

以上所说的“形参”均指函数的 显式参数(Parameters)，显式参数在函数定义时列出。

常规函数的传参：

function params(a, b, c) {
    console.log(a, b, c);
}
params(1, "ab", true);

匿名函数的传参：

var params1 = function (a, b, c, d) {
    console.log(a, b, c, d);
};
params1(10, "bcd", false, undefined);

自执行函数的传参：

(function (a, b, c, d) {
    console.log(a, b, c, d);
})(1, 2, 3, 4);

3、函数无形参列表，传递实参

参数列表对象：arguments
arguments 集合类型，也是数组型，key:value key也叫索引，以0开始
常规函数：

function par() {
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    console.log(arguments[3]);
}
par(1, 2, 3, 4);

匿名函数：

let par1 = function () {
    console.log(arguments[0]);
};
par1("abcd");

自执行函数：

(function () {
    console.log(arguments[0]);
    console.log(arguments[1]);
})(12, 3);

4、带返回值函数

函数体内部带return，return的值可以使任意类型。
常规函数带返回值：

function getname() {
    /*
     * 执行代码
     * */
    return "张三";
}
console.log(getname());    //张三

匿名函数带返回值：

let getsex = function () {
    /*
     * 执行代码
     * */
    return "男";
};
console.log(getsex());    // 男

自执行函数带返回值：
第一种方式：

console.log((function () {
    /*
     * 执行代码
     * */
    return 18;
})());        // 18

第二种方式：

let age = (function () {
    /*
     * 执行代码
     * */
    return 18;
})();
console.log(age);   // 18

5、函数带参数列表+返回值

常规函数：

function getname1(a, b, c) {
    console.log(a, b, c);
    return "李四";
}
console.log(getname1(1, 2, 3));    //1 2 3   李四

匿名函数：

let getsex1 = function (a, b) {
    console.log(a, b);
    return "女";
};
console.log(getsex1("123", 22));      // 123 22 女

自执行函数：
第一种方式：

console.log((function (a, b) {
    console.log(a, b);
    return 20;
})(1, 2));         //1 2   20

第二种方式：

let age1 = (function (a, b, c) {
    console.log(a, b, c);
    return 23;
})("abc", 12, 333);
console.log(age1);        //abc 12 333   23

6、函数无形参列表+返回值

常规函数：

function getname2() {
    console.log(arguments[0]);
    console.log(arguments[1]);
    return "王五";
}
console.log(getname2(12, 13));       // 12 13    王五

匿名函数：

let getsex2 = function () {
    console.log(arguments[0]);
    return "女";
};
console.log(getsex2("abc123"));   //abc123    女

自执行函数：
第一种方式：

console.log((function () {
    console.log(arguments[0]);
    console.log(arguments[1]);
    return 26;
})("abcd", 555));      //abcd 555    26

第二种方式：

let getage2 = (function () {
    console.log(arguments[0]);
    console.log(arguments[1]);
    return 25;
})(1, 3);
console.log(getage2);    //1 3    25

五、js中的call() 和 apply()

作用：
（1）替换对象（改变某个函数运行时的上下文context，也就是改变函数体内部this的指向）；
（2）传递值。

两者的区别：
call() 传递参数列表为序列；
apply() 传递参数列表为集合。

参数：
要替换的对象（必须）、要传递的参数。
如果不想替换原方法的 this ，第一个参数可以写成 null。

举例：

1、找出一个数组里面的最小值
（ 用 apply() 给Math.min 方法传值，传递参数列表是一个集合）

var str=[7,3,1,2,4,5,0,8];
console.log(Math.min.apply(null, str));  //0

2、改变函数的this指向
（将函数的 this 指向由 window 变为 obj）

var obj={
        "name":"张三"
    };
    function method(){
        console.log(this,arguments);
    }
    method.call(obj, 1, 2);
    method.apply(obj,[1,2]);