JS薄弱点记录

一、函数定义

JS使用关键字function定义函数，有三种定义方式（有时候也说有三种声明方式）。
1.函数声明

function functionName(parameters) {
     //执行代码
}
注意：函数声明后不会立即执行，在需要的时候调用。

2.函数表达式

 var x = function(a,b) {return a+b;}//匿名函数，函数存储在变量x中
 var z = x(4,3);//通过变量名x来调用匿名函数

3.Function()构造函数/函数对象
即，通过内置的JS函数构造器（Function()）定义

var addFunction = new Function("a","b","return a+b");
var res = addFunction(3,4);//调用

注意：new Function("a","b","return a+b")是不对的，会产生如下错误：

☆ 在实际使用中，尽量避免使用new关键字，所以第3种方法不常用。
JavaScript是一种prototypical（原型）类型语言，在创建之初，是为了迎合市场的需要，让人们觉得它和Java是类似的，才引入了new关键字。Javascript本应通过它的Prototypical特性来实现实例化和继承，但new关键字让它变得不伦不类。

二、函数调用

JS函数有4中调用方式，每种方式的不同在于this的初始化。
函数中的代码在函数被调用后执行。
1.作为一个函数调用

function myFunc(a,b) {
    return a + b;
}
myFunc(3,4); //返回20，在浏览器的控制台才能看到该输出

myFunc函数不属于任何对象，但是JS默认它是全局对象。
在HTML中，默认全局对象是HTML页面本身，因此函数myFunc属于HTML页面。
在浏览器中，页面对象是浏览器窗口（Window 对象），即myFunc自动变为window对象。
即，myFunc()和window.myFunc()一样。
注意：这是函数调用的常用方法，但是不是良好的变成习惯。全局变量、方法或者函数容易造成命名冲突的bug。

2.函数作为方法调用
即，将函数定义为对象的方法。

var myObject = {
    firstName:"John",//对象myObject的属性
    lastName: "Doe",//属性
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }//方法
}
myObject.fullName();         // 返回 "John Doe"

fullName方法是一个函数，函数属于对象myObject。
this的值为myObject对象

3.使用构造函数调用函数
如果函数调用前使用了new关键字，则是调用了构造函数。

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;//构造函数中的this关键字没有任何值，其值在函数调用实例化对象（new object）时创建。
    this.lastName  = arg2;
}
 
// 构造函数的调用会创建一个新的对象，新对象会继承构造函数的属性和方法
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

4.作为函数方法调用函数
JS中，函数是对象，有它的属性和方法
call()和apply()是预定义的函数方法，两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunc(a, b) {
    return a * b;
}
myObj = myFunc.call(myObj, 10, 2);     // 返回 20  //call从call的第二个参数传入函数的参数

function myFunc(a, b) {
    return a * b;
}
myArray = [10, 2];
myObj = myFunction.apply(myObj, myArray);  // 返回 20  //apply传入参数数组

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象，比如，传入null和undefined也会保持原样不被转换为window对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代

三、关键字this的理解

函数在运行时，在函数内部自动生成的一个对象，只能在函数内部使用个。一般来说，JS中，this指向函数执行时的当前对象。
函数没有被自身的对象调用时，this的值就会变成全局对象（浏览器中是浏览器窗口，window对象）
总结：随着函数使用场合的不同，this 的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

function myFunc(){
   return this;
}
myFunc();//[object Window]

情况1.纯粹的函数调用
全局性调用，this代表全局对象。

var x = 1;
function test() {
    console.log(this.x);
}
test(); //1

情况2.作为对象方法的调用
当函数作为某个对象的方法调用时，this指的就是这个上级对象。

function test() {
    console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); //1

情况3.作为构造函数调用
构造函数是什么呢？
——就是通过这个构造函数，可以生成一个新的对象。
此时，this就是这个新的对象。

function test() {
   this.x = 1;
}//构造函数

var obj = new test();//通过构造函数生成一个新对象
obj.x;//1

分析：

var x = 2;//创建一个全局变量

function test() {
   this.x = 1;
}//构造函数

var obj = new test();//通过构造函数生成一个新对象
console.log(obj.x);//1

console.log(x); //2

x的运行结果为2，说明全局变量x的值并没有改变.
情况4.apply调用
apply()是函数的一个方法，作用是改变函数的调用对象。第一个参数就表示改变后的调用这个函数的对象。也就是this指的就是apply的第一个参数。
当apply的参数为空的时候，默认调用全局对象。

var x = 0;
function test() {
   console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply();//0  //this指的是全局变量
obj.m.apply(obj);//1 //this指的是obj

四、数据类型

见文章“JS重要知识点记录（一）”

五、cookie

Cookie用于存储web页面的用户信息。是一些数据，存储于电脑上的文本文件中。
当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。而Cookie的作用就是用于解决“如何记录客户端的用户信息”：

• 当用户访问web页面时，他的名字可以记录在Cookie中。
• 当用户下一次访问该页面时，可以在cookie中读取用户访问记录。

Cookie以名/值对形式存储，如下所示：

username = Joy Ann

当浏览器从服务器上请求web页面时，属于该页面的Cookie会被添加到该请求中。服务端通过这种方式来获取用户的信息。

六、面向对象（JS的基于原型与Java的基于类的区别）

基于类的面向对象语言：Java和C++，是构建在两个不同实体的概念之上：类和实例。
类（class）：一类抽象的事物，定义了这类事物的属性（即方法和变量）
实例（instance）：类的一个成员。实例具有父类所有的属性，还可以包括自身独有的属性。
基于原型的语言不存在类和实例的区别：只有对象。

基于类的	基于原型的
1.定义类	1.定义原型对象
2.定义类的构造函数	2.定义对象的构造函数
3.实例化对象	3.将构造函数关联到原型
	4.实例化对象

注意：ES6中引入的class概念依然是基于原型的原理。
推荐一篇描述很清晰的文章：https://segmentfault.com/a/11...
小结一下：

1、prototype 就是函数的一个属性
2、prototype属性本身也是一个对象
3、当我们把一个函数Foo()当做构造器来创建一个新的对象f = new Foo()的时候，新对象f就可以访问到Foo()函数的prototype对象中的属性
4、new在创建一个新的对象f的时候，会赋予新对象f一个属性（_proto_）指向构造器的 prototype 属性
5、当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性，如果没有就查找它的原型（也就是 proto 指向的 prototype 对象），如果还没有就查找原型的原型（prototype 也有它自己的 __proto__，指向更上一级的 prototype 对象），依此类推一直找到 Object 为止
6、一个对象，它有许多属性，其中有一个属性指向了另外一个对象的原型属性；而后者也有一个属性指向了再另外一个对象的原型属性。这就像一条一环套一环的锁链一样，并且从这条锁链的任何一点寻找下去，最后都能找到链条的起点，即 Object；因此，我们也把这种机制称作：原型链。
7、既然 proto 可以访问到对象的原型，那么为什么禁止在实际中使用呢？
这是一个设计上的失误，导致 proto 属性是可以被修改的，同时意味着 JavaScript 的属性查找机制会因此而“瘫痪”，所以强烈的不建议使用它。

七、常用库——JQuery

测试 JavaScript 库（即引用它）：

<!--在head标签中引入JQuery库-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>

主要的 jQuery 函数： $() 函数（jQuery 函数）
比较使用JS语法和JQuery语法实现同一个功能的区别：

//JS方式
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;

//JQuery方式
function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);//注意JQuery返回的是JQuery对象，因而不能使用HTML DOM对象的属性或方法

JQuery允许链接，即链式语法。

function myFunction() {
     $(#id1).attr("style","color:red").html("hello JQuery")
}

八、常用框架

Vue