# The complete JS Course 2018

**Repository Path**: hermi0ne/The-complete-JS-Course-2018

## Basic Information

- **Project Name**: The complete JS Course 2018
- **Description**: The course of complete JavaScript Course of 2018 in Udemy.
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-09-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Chapter 2
primitive类型不是Object

undefined：未初始化的变量
```js
var job;
console.log(job);       // undefined
```
null：空指针对象
```js
var age = null;
console.log(age);       // null
console.log(typeof null === 'object');
```
## Chapter 3
![](http://petfhoepw.bkt.clouddn.com/markdown_2018-09-27_11-04-41.png)
**Execution Context**
有一个全局的global Execution Context。任何没有定义在function中的内容都是在global execution context中（也是一个对象）。在浏览器中，这个global execution context就是window对象，所以在浏览器中 
```js
var name = 'John';
console.log(window.name);   // John
```
每执行一个函数时就会创建一个新的execution context。
![](http://petfhoepw.bkt.clouddn.com/markdown_2018-09-27_11-18-38.png)
### 39 Hoisting
```js
calculateAge(2000);
// 因为函数声明在creating phase被存储在variable object（在execution phase之前）
function calculateAge(year) {
    console.log(2018 - year);
}

console.log(window);

// 因为变量声明在creating phase被存储在variable object中，并被设为undefined
console.log(age);       // undefined
var age = 23;

// console.log(name);   会报错：Uncaught ReferenceError: name is not defined
```

### 40 Scoping and the Scope Chain
*   **Execution Stack**: order in which functions are called
*   **Scope Chain**: Order in which functions are written lexically
```js
var a = 'leihou ';
first();

function first() {
    var b = 'Java';
    second();

    function second() {
        var c = 'JavaScript';
        third();
    }
}

function third() {
    var d = 'Python';
    console.log(a + b + c + d);
}
```
![](http://petfhoepw.bkt.clouddn.com/markdown_2018-09-27_15-02-24.png)
![](http://petfhoepw.bkt.clouddn.com/markdown_2018-09-27_15-02-40.png)

### 41 The 'this' keyword
*   **Regular function call**: 'this' keyword points at the global object, (the window object in the browser)
*   **Method call**: 'this' variable points to the object that is calling the method

## Chapter 4
JavaScript和DOM之间的关系
![](http://petfhoepw.bkt.clouddn.com/markdown_2018-09-27_15-35-18.png)
![](http://petfhoepw.bkt.clouddn.com/markdown_2018-09-27_15-36-54.png)

### 48 First DOM Access and Manipulation
**选择dom元素**
```js
document.querySelector('#xxx');
```
**改变所选dom元素的文本内容**
```js
document.querySelector('.ccc').textContext = '..';
```
**给选择的dom元素添加子节点**
```js
document.querySelector('#xxx').innerHTML = '<em>..</em>';
```
**改变所选dom元素的样式**
```js
// 改变display属性
document.querySelector('.ccc').style.display = '..';

### 49 Event and Event Handling
```js
document.querySelector('.btn-roll').addEventListener('click', function() {});
```

### 50 Updating Scores and Changing the Active Player
给DOM元素增加一个叫'active'的class
```js
document.querySelector('.player-' + nextPlayer + '-panel').classList.add('active');
```
给DOM元素增加一个叫'active'的class
```js
document.querySelector('.player-' + activePlayer + '-panel').classList.add('active');
```
一个更好的方法：```toggle()```，如果有这个class，则去除，如果没有这个class，则添加
```js
document.querySelector('.player-0-panel').classList.toggle('active');
document.querySelector('.player-1-panel').classList.toggle('active');
```

## Chapter 5
### 60 Everything is an Object: Inheritance and the Prototype Chain
> Almost everything is an object

![](http://petfhoepw.bkt.clouddn.com/markdown_2018-09-29_14-18-51.png)

#### inheritance
![](http://petfhoepw.bkt.clouddn.com/markdown_2018-09-29_14-30-37.png)

*   每个JavaScript的对象都有一个叫```prototype```的属性
*   The prototype property of an object is where we put methods and properties that we want **other objects to inherit**.
*   The Constructor's prototype property is **NOT** the prototype of the Constructor itself, it's the prototype of **ALL INSTANCES** that are created through it.
*   When a certain method(or property) is called, the search starts in the object itself, and if it cannot be found, the search moves on to the object's prototype. This continues until the method is found: **prototype chain**.

### 61 Creating Objects: Function Constructors
```js
function Person(name, yearOfBirth, job) {
    this.name = name;
    this.yearOfBirth = yearOfBirth;
    this.job = job;
}

john = new Person('John', 1990, 'teacher');

/**
 * new做的事情：
 *  1. 创建一个空的object
 *  2. 在这个空的object上执行Person()方法（把this指向步骤1创建的空的object）
 */

function add() {
    console.log(this === global);
}

add();      // 这样调用的话 打印true
var add = new add();        // 这样调用的话 打印false，因为此时this被指向了新创建的空对象
```

***为什么要在构造方法的```prototype```属性中定义一些公共属性和方法？为什么不在构造方法中定义？***

如下面所示：
```js
function Person(name, yearOfBirth, job) {
    this.yearOfBirth = yearOfBirth;
    this.calculateAge = function() {
        console.log(2016 - this.yearOfBirth);
    }
}

var john = new Person(1990);
john.calculateAge();

var jane = new Person(1991);
jane.calculateAge();

console.log(john.calculateAge === jane.calculateAge);       //false
```
**这种方式的缺点是**：假设有10000个Person的对象，那么这些所有的对象的calculateAge()方法都相同，但是有10000份拷贝，浪费内存

所以要在构造方法的```prototype```属性中定义

```js
function Person(name, yearOfBirth, job) {
    this.yearOfBirth = yearOfBirth;
}

Person.prototype.calculateAge = function() {
    console.log(2016 - this.yearOfBirth);
}

var john = new Person(1990);
john.calculateAge();

var jane = new Person(1991);
jane.calculateAge();

console.log(john.calculateAge === jane.calculateAge);           // true
```
### 62 The Prototype Chain in the Console
``` js
john.__proto__ === Person.prototype
```
![](http://petfhoepw.bkt.clouddn.com/markdown_2018-09-29_15-44-40.png)
还包括Array
![](http://petfhoepw.bkt.clouddn.com/markdown_2018-09-29_15-53-41.png)
有上图可知，Array中的方法都是定义在```Array.prototype```中的。

### 63 Creating Objects: ```Object.create()```

```js
var personProto = {
    calculateAge: function() {
        console.log(2018 - this.yearOfBirth);
    }
};

var john = Object.create(personProto);
john.yearOfBirth = 1990;

var jane = Object.create(personProto, 
    {
        yearOfBirth: { value: 1991 },
        name: { value: 'Jane' }
    }
);

console.log(john.calculateAge === jane.calculateAge);       // true
```
和Function constructor创建对象方式的区别

![](http://petfhoepw.bkt.clouddn.com/markdown_2018-09-29_16-21-50.png)

![](https://sherry-pic.oss-cn-hangzhou.aliyuncs.com/markdown_2018-10-10_14-17-22.png)

Function constructor更常用一些

### 65 First Class Function: Passing Functions as Arguments
*   A function is an instance of the Object type;
*   A function behaves like any other object;
*   We can store functions in a variable
*   We can pass a function as an argument to another function
*   We can return a function from a function