美文网首页
JavaScript 精粹整理

JavaScript 精粹整理

作者: 深沉的简单 | 来源:发表于2016-12-06 14:45 被阅读5次

数据类型

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

基本数据类型

  1. Boolean
  2. Number
  3. String
  4. null
  5. undefined
  6. Symbol

对象类型Object

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

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

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. 直接使用：全局作用域
var global_var = 1;

function fn() {
    var fn_var = 2;

    if (fn_var > 10) {
        let block_var = 3;
        global_var2 = 4;
    }
}

只声明不赋值，变量的默认值是 undefined

const 关键字可以声明不可变变量，同样为块作用域。对不可变的理解在对象上的理解需要注意

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)

console.log(a); // undefined
var a = 2;

等同于

var a;
console.log(a);
a = 2;

函数

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

  1. 函数声明
  2. 函数表达式
  3. Function 构造函数
  4. 箭头函数
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: 当前正在执行的函数

function foo() {
    return arguments;
}
foo(1, 2, 3); // Arguments[3]
// { "0": 1, "1": 2, "2": 3 }

rest

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

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

function fn(a = 2, b = 3) {
    return a + b;
}


fn(2, 3); // 5

fn(2); // 5

fn(); // 5

对象

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

定义对象

  1. 字面量
  2. 构造函数
var obj = {
    prop: 'value',
    fn: function() {}
};

var date = new Date();

构造函数

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

函数的返回值有两种可能

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

  2. 没有调用return返回undefined

function People(name, age) {
    this.name = name;
    this.age = age;
}

var people = new People('Byron', 26);
console.log(people)
Paste_Image.png

构造函数返回值

  1. 没有返回值
  2. 简单数据类型
  3. 对象类型

前两种情况构造函数返回构造对象的实例，实例化对象正是利用的这个特性

第三种构造函数和普通函数表现一致，返回return后表达式的结果

prototype

  1. 每个函数都有一个 prototype 的对象属性，对象内有一个 constructor 属性，默认指向函数本身
  2. 每个对象都有一个 proto 的属性，属相指向其父类型的 prototype
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();
console.log(p1)
Paste_Image.png

this 和作用域

作用域可以通俗的理解

  1. 我是谁
  2. 我有哪些马仔

其中我是谁的回答就是 this

马仔就是我的局部变量

this 场景

普通函数

  1. 严格模式：undefined
  2. 非严格模式: 全局对象
  3. Node: global
  4. 浏览器: window

构造函数：对象的实例

对象方法：对象本身

call & apply

  1. fn.call(context, arg1, arg2, …, argn)
  2. fn.apply(context, args)
function isNumber(obj) {
    return Object.prototype.toString.call(obj) === '[object Number]';
}

Function.prototype.bind

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

function fn() {
    this.i = 0;

    setInterval(function() {
        console.log(this.i++);
    }.bind(this), 500)
}

fn();

() => {}

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

function fn() {
    this.i = 0;

    setInterval(() => {
        console.log(this.i++);
    }, 500)
}

fn();

继承

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

  1. 对象的属性
  2. 对象的方法
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 与继承

"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

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);

语句与表达式

var x = {
    a: 1
};

{
    a: 1
}

{
    a: 1,
    b: 2
}

立即执行函数

( 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() {}();

高阶函数

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

回调函数

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

闭包

闭包由两部分组成

  1. 函数
  2. 环境：函数创建时作用域内的局部变量
function makeCounter(init) {
    var init = init || 0;

    return function() {
        return ++init;
    }
}

var counter = makeCounter(10);

console.log(counter());
console.log(counter());

典型错误

for (var i = 0; i < doms.length; i++) {
    doms.eq(i).on('click', function(ev) {
        console.log(i);
    });
}

             

for (var i = 0; i < doms.length; i++) {
    (function(i) {
        doms.eq(i).on('click', function(ev) {
            console.log(i);
        });
    })(i);
}

惰性函数

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();

柯里化

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

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]));

       

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）

function factorial(n) {
    if (n === 1) return 1;
    return n * factorial(n - 1);
}

factorial(5) // 120

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

function factorial(n, total) {
    if (n === 1) return total;
    return factorial(n - 1, n * total);
}

factorial(5, 1) // 120

柯里化减少参数

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

反柯里化

Function.prototype.uncurry = function() {
    return this.call.bind(this);
};

push 通用化

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

var arr = [];

push(arr, 1);
push(arr, 2);
push(arr, 3);

console.log(arr);

相关文章

  • JavaScript 精粹整理

    数据类型 JavaScript 是 弱类型 语言，但并不是没有类型，JavaScript可以识别下面 7 种不同类...

  • JavaScrip条件求值

    《Javascript编程精粹》

  • 2016 读书清单

    技术类javascript权威指南 (未完成）javascript语言精粹（?）javascript设计模式(未完...

  • 前端技术书

    入门级 《JavaScript高级程序设计》 《编写可维护的JavaScript》 《Javascript语言精粹...

  • JavaScript 精粹

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

  • 用铁路图(railroad diagram)来表示JavaScr

    在《JavaScript语言精粹》中，作者用铁路图(railroad diagram)来表示JavaScript中...

  • JavaScript语言精粹

    JavaScript语言精粹 前言 约定：=> 表示参考相关文章或书籍; JS是JavaScript的缩写。 本书...

  • JavaScript 学习笔记

    参考书籍 JavaScript高级程序设计 JavaScript语言精粹 ECMAScript 6 入门 一些注意...

  • 基础

    JS 你不知道的 js 上中下 JavaScript 设计 模式 与 开发 实践 JavaScript 语言精粹 ...

  • JavaScript语言精粹

    第二章 语法 数字 JavaScript 只有一个数字类型，它在内部被表示为64位的浮点数，和Java的doubl...

网友评论

      本文标题：JavaScript 精粹整理

      本文链接：https://www.haomeiwen.com/subject/lnhrmttx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|JavaScript 精粹整理|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！