<html lang="en">

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>Object</title>

<style>

*{

box-sizing: border-box;

margin: 0;

padding: 0;

justify-content: center;

align-content: center;

/*overflow: hidden;*/

/*scroll-behavior: transparent;*/

}

</style>

<div>

<div>

<h1>Object</h1>

<pre>

<h3>JS对象 创建方式:</h3>

1.对象 new:

2.对象 构造函数:

3.对象 直接量声明:

</pre>

<pre>

dev.modern.ie/testdrive/demos/particleacceleration.html

</pre>

</div>

<div>

<pre>

<h1>JavaScript 精粹</h1>

# JavaScript 精粹

## 数据类型

JavaScript 是 **弱类型** 语言，但并不是没有类型，JavaScript可以识别下面 7 种不同类型的值：

## 基本数据类型

### ECMAScript Data Types and Values

#### ECMAScript Language Types

1. Undefined

2. Null

3. Boolean

4. String

5. Number

6. Symbol

7. Object

#### ECMAScript Specification Types

1. The List and Record Specification Type

2. The Completion Record Specification Type

3. The Reference Specification Type

4. The Property Descriptor Specification Type

5. The Lexical Environment and Environment Record Specification Types

6. Data Blocks

#### Object

1. Array 2. RegExp 3. Date 4. Math 5. ...

可以使用 `typeof` 判断数据类型，操作符返回一个字符串，但并非返回的所有结果都符合预期

``` javascript

typeof false

// "boolean"

typeof .2

// "number"

typeof NaN

// "number"

typeof ''

// "string"

typeof undefined

// "undefined"

typeof Symbol()

// "symbol"

typeof new Date()

// "object"

typeof []

// "object"

typeof alert

// "function"

typeof null

// "object"

typeof not_defined_var

// "undefined"

```

## 变量

在应用程序中，使用变量来来为值命名。变量的名称称为 `identifiers`

#### 声明

1. 使用关键字 `var` ：函数作用域

2. 使用关键字 `let` ：块作用域 (block scope local variable)

3. 直接使用：全局作用域

```javascript

var global_var = 1;

function fn () {

var fn_var = 2;

if(fn_var > 10){

let block_var = 3;

global_var2 = 4;

}

}

```

#### 只声明不赋值，变量的默认值是 `undefined` `const` 关键字可以声明不可变变量，同样为块作用域。

#### 对不可变的理解在对象上的理解需要注意

```javascript

const num = 1;

const obj = { prop: 'value' };

num = 2;

// Uncaught TypeError: Assignment to constant variable.

obj['prop'] = 'value2';

obj = [];

// Uncaught TypeError: Assignment to constant variable.

```

#### 变量提升

JavaScript中可以引用稍后声明的变量，而不会引发异常，这一概念称为变量声明提升(**hoisting**)

```javascript

console.log(a);

//Uncaught ReferenceError: x is not defined

var a = 2;

```

不等同于

```javascript

console.log(a);

var a = 2;

//undefined

```

等同于

```javascript

var a;

console.log(a);

//undefined

a = 2;

```

# 函数

一个函数就是一个可以被外部代码调用(或者函数本身递归调用)的 `子程序`

#### 定义函数

1. 函数声明

2. 函数表达式

3. Function 构造函数

4. 箭头函数

```javascript

function fn(){}

var fn = function(){}

var fn = new Function(arg1, arg2, ... argN, funcBody)

var fn = (param) => {}

```

#### arguments

1. arguments: 一个包含了传递给当前执行函数参数的类似于数组的对象

2. arguments.length: 传给函数的参数的数目

3. ~~arguments.caller: 调用当前执行函数的函数~~

4. ~~arguments.callee: 当前正在执行的函数~~

```javascript

function foo() {

return arguments;

}

foo(1, 2, 3);

// Arguments[3]

// { "0": 1, "1": 2, "2": 3 }

```

#### rest

```javascript

function foo(...args) {

return args;

}

foo(1, 2, 3);

// Array[3]

// [1, 2, 3]

function fn(a, b, ...args){

return args;

}

fn(1, 2, 3, 4, 5);

// Array[3]

// [3, 4, 5]

```

#### default 函数的参数可以在定义的时候约定默认值

```javascript

function fn (a = 2, b = 3) {

return a + b;

}

fn(2, 3);

// 5

fn(2);

// 5

fn();

// 5

```

## 对象

JavaScript 中对象是可变 `键控集合` (**keyed collections**)

#### 定义对象

1. 字面量

2. 构造函数

```javascript

var obj = { prop: 'value', fn: function(){} };

var date = new Date();

```

#### 构造函数

构造函数和普通函数并没有区别，使用 `new` 关键字调用就是构造函数，使用构造函数可以**实例化** 一个对象

函数的返回值有两种可能

1. 显式调用 `return` 返回 `return` 后表达式的求值

2. 没有调用 `return` 返回 `undefined`

```javascript

function People(name, age) {

this.name = name;

this.age = age;

}

var people = new People('Byron', 26);

```

构造函数返回值

1. 没有返回值

2. 简单数据类型

3. 对象类型

前两种情况构造函数返回构造对象的实例，

**实例化**对象正是利用的这个特性 第三种构造函数和普通函数表现一致，返回 `return` 后表达式的结果

#### prototype

1. 每个函数都有一个 `prototype` 的对象属性，对象内有一个 `constructor` 属性，默认指向函数本身

2. 每个对象都有一个 `__proto__` 的属性，属相指向其父类型的 `prototype`

```javascript

function Person(name) {

this.name = name;

}

Person.prototype.print = function () {

console.log(this.name);

};

var p1 = new Person('Byron');

var p2 = new Person('Casper');

p1.print(); p2.print();

```



## this 和作用域

作用域可以通俗的理解

1. 我是谁

2. 我有哪些马仔

其中我是谁的回答就是 `this`

马仔就是我的局部变量

#### this 场景

**普通函数**

1. 严格模式：`undefined`

2. 非严格模式: 全局对象 1. Node: `global` 2. 浏览器: `window`

**构造函数**：对象的实例

**对象方法**：对象本身

#### call & apply

1. fn.call(context, arg1, arg2, …, argn)

2. fn.apply(context, args)

```javascript

function isNumber(obj) {

return Object.prototype.toString.call(obj) === '[object Number]';

}

```

#### Function.prototype.bind

`bind` 返回一个新函数，函数的作用域为 `bind` 参数

```javascript

function fn() {

this.i = 0;

setInterval(function () {

console.log(this.i++);

}.bind(this), 500)

}

fn();

```

#### () => {}

箭头函数是 **ES6** 提供的新特性，是简写的 **函数表达式**，拥有词法作用域和 `this` 值

```javascript

function fn() {

this.i = 0;

setInterval(() => {

console.log(this.i++);

},500)

}

fn();

```

## 继承

在 JavaScript 的场景，继承有两个目标，子类需要得到父类的：

1. 对象的属性

2. 对象的方法

```javascript

function inherits(child, parent) {

var _proptotype = Object.create(parent.prototype);

_proptotype.constructor = child.prototype.constructor;

child.prototype = _proptotype;

}

function People(name, age) {

this.name = name;

this.age = age;

}

People.prototype.getName = function () {

return this.name;

}

function English(name, age, language) {

People.call(this, name, age);

this.language = language;

} inherits(English, People);

English.prototype.introduce = function () {

console.log('Hi, I am ' + this.getName());

console.log('I speak ' + this.language);

}

function Chinese(name, age, language) {

People.call(this, name, age);

this.language = language;

} inherits(Chinese, People);

Chinese.prototype.introduce = function () {

console.log('你好，我是' + this.getName());

console.log('我说' + this.language);

}

var en = new English('Byron', 26, 'English');

var cn = new Chinese('色拉油', 27, '汉语');

en.introduce();

cn.introduce();

```

#### ES6 class 与继承

```javascript

"use strict";

class People{

constructor(name, age){

this.name = name;

this.age = age;

}

getName(){

return this.name;

}

}

class English extends People{

constructor(name, age, language){

super(name, age);

this.language = language;

}

introduce(){

console.log('Hi, I am ' + this.getName());

console.log('I speak ' + this.language);

}

}

let en = new English('Byron', 26, 'English');

en.introduce();

```

## 语法

#### label statement

```javascript

loop: for (var i = 0; i < 10; i++) {

for (var j = 0; j < 5; j++) {

console.log(j);

if (j === 1) {

break loop;

}

}

}

console.log(i);

```

#### 语句与表达式

```javascript

var x = { a:1 };

{ a:1 }

{ a:1, b:2 }

```

#### 立即执行函数

```javascript

( function() {}() );

( function() {} )();

[ function() {}() ];

~ function() {}();

! function() {}();

+ function() {}();

- function() {}();

delete function() {}();

typeof function() {}();

void function() {}();

new function() {}();

new function() {};

var f = function() {}();

1, function() {}();

1 ^ function() {}();

1 > function() {}();

```

## 高阶函数

高阶函数是把函数当做参数或者返回值是函数的函数

#### 回调函数

```javascript

[1, 2, 3, 4].forEach(function(item){ console.log(item); });

```

#### 闭包

闭包由两部分组成

1. 函数

2. 环境：函数创建时作用域内的局部变量

```javascript

function makeCounter(init) {

var init = init || 0;

return function(){

return ++init;

}

}

var counter = makeCounter(10);

console.log(counter());

console.log(counter());

```

#### 典型错误

```javascript

for (var i = 0; i < doms.length; i++) {

doms.eq(i).on('click', function (ev) {

console.log(i);

});

}

```

```javascript

for (var i = 0; i < doms.length; i++) {

(function (i) {

doms.eq(i).on('click', function (ev) {

console.log(i);

});

})(i);

}

```

#### 惰性函数

```javascript

function eventBinderGenerator() {

if (window.addEventListener) {

return function (element, type, handler) {

element.addEventListener(type, hanlder, false);

}

}

else {

return function (element, type, handler) {

element.attachEvent('on' + type, handler.bind(element, window.event));

}

}

}

var addEvent = eventBinderGenerator();

```

#### 柯里化

一种允许使用部分参数生成函数的方式 ​

```javascript

function isType(type) {

return function(obj){

return Object.prototype.toString.call(obj) === '[object '+ type +']';

}

}

var isNumber = isType('Number');

console.log(isNumber(1));

console.log(isNumber('s'));

var isArray = isType('Array');

console.log(isArray(1));

console.log(isArray([1, 2, 3]));

```

```javascript

function f(n) {

return n * n;

}

function g(n) {

return n * 2;

}

console.log(f(g(5)));

function pipe(f, g) {

return function () {

return f.call(null, g.apply(null, arguments));

}

}

var fn = pipe(f, g);

console.log(fn(5));

```

#### 尾递归

1. 尾调用是指某个函数的最后一步是调用另一个函数

2. 函数调用自身，称为递归

3. 如果尾调用自身，就称为尾递归 递归很容易发生"栈溢出"错误（stack overflow）

```javascript

function factorial(n) {

if (n === 1) return 1;

return n * factorial(n - 1);

}

factorial(5)

// 120

```

#### 但对于尾递归来说，由于只存在一个调用记录，所以永远不会发生"栈溢出"错误

```javascript

function factorial(n, total) {

if (n === 1) return total;

return factorial(n - 1, n * total);

}

factorial(5, 1) // 120

```

#### 柯里化减少参数

```javascript

function currying(fn, n) {

return function (m) {

return fn.call(this, m, n);

};

}

function tailFactorial(n, total) {

if (n === 1) return total;

return tailFactorial(n - 1, n * total);

}

const factorial = currying(tailFactorial, 1);

factorial(5);

// 120

```

#### 反柯里化

```javascript

Function.prototype.uncurry = function () {

return this.call.bind(this);

};

```

#### push 通用化

```javascript

var push = Array.prototype.push.uncurry();

var arr = [];

push(arr, 1);

push(arr, 2);

push(arr, 3);

console.log(arr);

```

</pre>

</div>

</div>

<script>

var newObj = new Object;//instance of Object

var newProp = "I'm xgqfrms!" //define property

var newFunc = function(name){//define function

var hello ="hello, "+ name +"!";

return hello;

}

newObj.info = newProp;// add property

newObj.func = newFunc;// add function

console.log(newObj.info);// call function

// I'm xgqfrms!

console.log(newObj.func("ET"));// call function

// hello, ET!

console.log(newObj instanceof Object);

//true

console.log(typeof(newObj));

//"object"

</script>

<script>

//对象直接量声明

//http://www.cnblogs.com/dolphinX/p/3529249.html

var obj={

name:"Byron",

age:24

};

</script>

</html>