JS知识点（一）

1、this

1.1、在一般函数方法中使用 this 指代全局对象

    function aa(){
        var user = "xxx";
        console.log(this.user); //undefined
        console.log(this); //Window
    }
    aa();

1.2、作为对象方法调用，this 指代上级对象

  const a = {
        dam: "zhang",
        foo(){ // this表示的是a这个对象
            return this.dam
        }
  };
  console.log(a.foo()); //zyzhang

1.3、作为构造函数调用，this 指代new 出的对象

    function Fn(){
        this.user = "zyzhang";
    }
    var a = new Fn();
    console.log(a.user); //zyzhang

    // 注意：Fu函数如果返回值是一个对象，那么this指向的就是那个返回的对象，
    // 如果返回值不是一个对象那么this还是指向函数的实例。
    // 如下：
    function fn() {
        this.user = '追梦子';
        return {};
    }
    var a = new fn;
    console.log(a); //{} 
    console.log(a.user); //undefined 
    // 如果返回的不是一个对象比如是1，undefined，将会是另一个结果。  
    // 特别注意：虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

1.4、apply 调用 ，apply方法作用是改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象，this指代第一个参数

2、call,apply,bind方法汇总

在js中，这三种方法都是用来改变函数的this对象的指向的。

第一个参数都是this要指向的对象,后面都可以继续传递参数。

分析：

var xb = {
    name: '小冰',
        gender: '女',
        say: function () {
            console.log(this.name + ',' + this.gender);
        }
};
var other = {
    name: '小东',
    gender: '男',
};
xb.say();
//很明显代码输出了“小冰，女”。

如果我们想要用xb的say()方法输出other的数据，要怎么办呢？这时就需要改变this的指向了。
如下三个方法都能实现：

xb.say.call(other);
xb.say.apply(other);
xb.say.bind(other)();

call()和apply()函数的用法其实是一样的，只是传参的形式不一样，这是他们最大的差别
xb.say.call(other,'斯坦福','3') // ====> 小东，男----斯坦福，3
xb.say.apply(other,['sitanfu','third']);// ====> 小东，男----sitanfu，third
bind()呢？
xb.say.bind(other,'斯坦福','3');// 是不是跟call传参很像
但是上面xb.say.bind(other,’斯坦福’,’3’)，返回的其实还是一个函数，并没有执行
所以要执行，需要在xb.say.bind(other)后面加()让其执行。执行结果如下：
console.log(xb.say.bind(other))('斯坦福','3');// ==> 小东，男---斯坦福，3

3、ES6相关的部分关键点

3.1、模板字符串

将表达式嵌入字符串中进行拼接。用${}来界定。

//es5
 var name = 'lux'
 console.log('hello' + name)
//es6
 const name = 'lux'
 console.log(`hello ${name}`) //hello lux

3.2、更方便的数据访问--解构

//对象（数组类似）
const people = {
    name: 'lux',
    age: 20
}
const {name, age} = people
console.log(`${name} --- ${age}`)

3.3、Spread Operator 展开运算符

//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]

3.4、import 和 export

import导入模块、export导出模块

//全部导入
import people from './example'
//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//导入部分
import {name, age} from './example'
// 导出默认, 有且只有一个默认
export default App
// 部分导出
export class App extend Component {};

4、页面初始化

<script src="js/jquery-3.2.1.js"></script>
    <script>
        // 网页中所有dom结构绘制完毕后就执行可能DOM元素关联的东西并没有加载完
        $(document).ready(function () {
            alert("hello world");
        });
        // 简化写法：$(function(){...})

        // 必须等待网页中所有的内容加载完毕后（包括图片）才能执行
        window.onload = function () {
            alert("hello world !!!")
        }

    </script>

5、DOM对象（Document Object Model）

解释：当浏览器载入HTML文档, 它就会成为document对象。
每一份DOM都可以表示成一棵树，由不同的DOM节点（如：元素节点，文本节点，属性节点, 注释节点）组成。
示例：获取元素节点
var domObj = document.getElementById("id名称"); // 此时domObj就是我们得到的一个DOM对象
我们通过获取的对象来使用它的属性进行相应的操作，如：使用domObj.innerHtml获取该元素的内容
而jQuery对象就是通过jQuery包装DOM对象后产生的对象。
如：$(“#foo”).html; // 获取id为foo的元素内的html代码。html()就是jQuery封装的方法。
所以这段代码可以这样写：
doucment.getElementById("foo").innetHtml;// 原生写法
扩展：
1）开发过程中需要按如下规则命名如：
var $variable = jQuery对象；
var variable = DOM对象；
2）jQuery转DOM对象：
var $cr = $("#cr"); // jQuery对象
如需要将该对象转化为DOM对象有两个方法：[idnex]和get[index]
// var cr = $cr[0] or $cr.get[0]
3）DOM对象转化为jQuery对象：(使用$()把DOM对象包起来即可)
var cr = document.getElementById("cr"); // DOM对象
var $cr = $(cr);