JavaScript 精粹

数据类型

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

基本数据类型

  • Boolean
  • Number
  • String
  • null
  • undefined
  • Symbol (es6,引入唯一值)

Oject

  • Array
  • RegExp
  • Date
  • Math

可以使用 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

声明

  • 使用关键字 var-> 函数作用域
  • 使用关键字 let-> 块作用域(block scope local variable)
  • 直接使用：全局作用域

变量提升

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

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

等同于

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

函数

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

定义函数

  • 函数声明
  • 函数表达式
  • Function 构造函数
  • 箭头函数
function fn(){}
var fn=functoin(){}
var fn=new Function(arg1,arg2,...argN,funcBody);//和eval一样进入了javascript解释内核中，几乎不用
var fn=(params)=>{}

arguments

  • arguments:一个包含了还递给当前执行函数参数的类似于数组的对象
  • arguments.length:传给函数的参数的数目，实参
function foo(){
    return arguments;
}
foo(1,2,3);  //Arguments[3]
//{"0":1,"1":2,"2":3}

rest

对arguments的一种优化

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);
//[3,4,5] 返回数组

default

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

对象

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

定义对象

  • 字面量
  • 构造函数
var obj={
    prop:'value',
    fn:function(){}
}
var date=new Date();

构造函数

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

函数的返回值有两种可能

  • 显式调用 return 返回 return 后表达式的求值
  • 没有调用 return 返回 undefined 
function People(name,age){
    this.name=name;
    this.age=age;
}
var people=new People('Byron',26);

构造函数的返回值

  • 没有返回值
  • 简单数据类型
  • 对象类型

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

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

prototype

  • 每个函数都有一个 prototype的对象属性，对象内有一个constructor属性，默认指向函数本身
  • 每个对象都有一个 __proto__ 的属性，属性指向父类型的 prototype 
function Person(name){
    this.name=name;
}
Person.prototype.print=function(){
    console.log(this.name);
}
var p1=new Person('Jacket');
console.log(p1);
alt 构造函数内部情况

this和作用域

作用域可以通俗的理解

  • 我是谁
  • 我有哪些马仔

其中我是谁的回答就是 this

马仔就是我的局部变量

this 场景

普通函数

  • 严格模式：undefined
  • 非严格模式： 全剧对象

    1） Node：global
    1. 浏览器：window

构造函数：对象的实例

对象方法：对象本身

call&apply

  • fn.call(context,arg1,arg2,...,argn)
  • fn.apply(context,args)

通过其他函数调用这个方法产生一个函数作用域

function isNumber(obj){
    //传入的实参去调用Object原型链上的toString方法，而不用自己本身的toString方法
    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();

执行结果

0
1
2
3
...

setInterval函数里面本来作用域this是undefined，通过绑定fn里面的this，将this传进去

箭头函数

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

function fn(){
    this.i=0;
    setInterval(()=>{
        //this指向外面的this
        console.log(this.i++);
    },500);
}
fn();

执行结果和上面一样

继承

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

1.对象的属性(得到父类的属性)

2.对象的方法(得到父类的方法)

function inherits(child,parent){
    //创建一个parent.prototype的副本(浅拷贝)
    var _prototype=Object.create(parent.prototype);
    //_prototype的constructor.name指向的是parent的name，重新赋值child.constructor
    _prototype.constructor=child.prototype.constructor;
    child.prototype=_prototype;
}
function People(name,age){
    this.name=name;
    this.age=age;
}
People.prototype.getName=function(){
    return this.name;
}
//English继承People的方法，当English新增方法不改变父级的方法
//English.prototype=People.prototype按址引用，English改变People也改变
//寄生式组合继承
function English(name,age,language){
    People.call(this,name,age);
    this.language=language;
}
inherits(English,People);

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){
        //调用父类构造函数，如果子类和父类构造函数相同，可不写constructor
        //如果写了constructor，没调super，就不能继承父类的方法了
        super(name,age);
        this.language=language;
    }
    introduce(){
        console.log('I am '+this.getName);
        console.log('I speak '+this.language);
    }
}

语法 label statement

语句与表达式

可以解释成语句的不会解释成表达式

var x={a:1} //表达式 //{a:1}
{a:1}     //语句   //{}里面的a是语句，1是表达式，输出1
{a:1,b:2}   //逗号是表达式，b:2会报错

立即执行函数

//()里面必须是表达式，function(){}()要按照表达式来执行
//function(){}为方法声明，function(){}()为方法调用
(function(){}());
(function(){})();
[function(){}()];
~function(){}();
!function(){}();
+function(){}();
-function(){}();
delete function(){}();
typeof function(){}();   //typeof是一种运算符
void function(){}();
new function(){}();
var f=function(){}();
1,function(){}();
1^function(){}();
1>function(){}();

高阶函数

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

回调函数

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

闭包

函数的嵌套，并且对外提供访问，产生闭包

闭包由两部分组成

  • 函数
  • 环境：函数创建时作用域内的局部变量
function makeCounter(init){
    var init=init||0;
    return function(){
        return ++init;
    }
}
var counter=makeCounter(10);
console.log(makeCounter());
console.log(makeCounter());

典型错误

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

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

惰性函数

function eventBinderGenerator(){
    if(window.addEventListener){
        return function(element,type,handler){
            element.addEventListener(type,handler,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'));

function f(n){
    reuturn n*n;
}
function g(n){
    return n*2;
}
console.log(f(g(5)));
function pipe(f,g){
    return f.call(null,g.apply(null,arguments));
}
var fn=pipe(f,g);
console.log(fn(5));

尾递归

  • 尾调用是指某个函数的最后一步是调用另一个函数
  • 函数调用自身，称为递归
  • 如果尾递归自身，就称为尾递归
    递归很容易发生 栈溢出 错误(stack overflow)

反柯里化

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);
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容