数据类型
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 判断数据类型,操作符返回一个字符串,但并非返回的所有结果都符合预期
?
1 2 3 4 5 6 7 8 9 10 11 | 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.直接使用:全局作用域
?
1 2 3 4 5 6 7 8 | var global_var = 1; function fn () { var fn_var = 2; if (fn_var > 10){ let block_var = 3; global_var2 = 4; } } |
只声明不赋值,变量的默认值是 undefined
const 关键字可以声明不可变变量,同样为块作用域。对不可变的理解在对象上的理解需要注意
?
1 2 3 4 5 6 7 | 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)
?
1 2 | console.log(a); // undefined var a = 2; |
等同于
?
1 2 3 | var a; console.log(a); a = 2; |
函数
一个函数就是一个可以被外部代码调用(或者函数本身递归调用)的 子程序
定义函数
1.函数声明
2.函数表达式
3.Function 构造函数
4.箭头函数
?
1 2 3 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: 当前正在执行的函数
?
1 2 3 4 5 | function foo() { return arguments; } foo(1, 2, 3); // Arguments[3] // { "0": 1, "1": 2, "2": 3 } |
rest
?
1 2 3 4 5 6 7 8 9 10 | 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
函数的参数可以在定义的时候约定默认值
?
1 2 3 4 5 6 | function fn (a = 2, b = 3) { return a + b; } fn(2, 3); // 5 fn(2); // 5 fn(); // 5 |
对象
JavaScript 中对象是可变 键控集合 (keyed collections)
定义对象
1.字面量
2.构造函数
?
1 2 3 4 5 | var obj = { prop: 'value' , fn: function (){} }; var date = new Date(); |
构造函数
构造函数和普通函数并没有区别,使用 new 关键字调用就是构造函数,使用构造函数可以 实例化 一个对象
函数的返回值有两种可能
1.显式调用 return 返回 return 后表达式的求值
2.没有调用 return 返回 undefined
?
1 2 3 4 5 | 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
?
1 2 3 4 5 6 7 8 9 10 | 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.非严格模式: 全局对象
3.Node: global
4.浏览器: window
构造函数:对象的实例
对象方法:对象本身
call & apply
1.fn.call(context, arg1, arg2, …, argn)
2.fn.apply(context, args)
?
1 2 3 | function isNumber(obj) { return Object.prototype.toString.call(obj) === '[object Number]' ; } |
Function.prototype.bind
bind 返回一个新函数,函数的作用域为 bind 参数
?
1 2 3 4 5 6 7 8 | function fn() { this .i = 0; setInterval( function () { console.log( this .i++); }.bind( this ), 500) } fn(); () => {} |
箭头函数是 ES6 提供的新特性,是简写的 函数表达式,拥有词法作用域和 this 值
?
1 2 3 4 5 6 7 | function fn() { this .i = 0; setInterval(() => { console.log( this .i++); }, 500) } fn(); |
继承
在 JavaScript 的场景,继承有两个目标,子类需要得到父类的:
1.对象的属性
2.对象的方法
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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 与继承
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | "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:
?
1 2 3 4 5 6 7 8 9 | 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); |
语句与表达式
?
1 2 3 | var x = { a:1 }; { a:1 } { a:1, b:2 } |
立即执行函数
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ( 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 | [1, 2, 3, 4].forEach( function (item){ console.log(item); }); |
闭包
闭包由两部分组成
1.函数
2.环境:函数创建时作用域内的局部变量
?
1 2 3 4 5 6 7 8 9 | function makeCounter(init) { var init = init || 0; return function (){ return ++init; } } var counter = makeCounter(10); console.log(counter()); console.log(counter()); |
典型错误
?
1 2 3 4 5 6 7 8 9 10 11 12 | 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); } |
惰性函数
?
1 2 3 4 5 6 7 8 9 10 11 12 | 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(); |
柯里化
一种允许使用部分参数生成函数的方式
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 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)
?
1 2 3 4 5 | function factorial(n) { if (n === 1) return 1; return n * factorial(n - 1); } factorial(5) // 120 |
但对于尾递归来说,由于只存在一个调用记录,所以永远不会发生"栈溢出"错误
?
1 2 3 4 5 | function factorial(n, total) { if (n === 1) return total; return factorial(n - 1, n * total); } factorial(5, 1) // 120 |
柯里化减少参数
?
1 2 3 4 5 6 7 8 9 10 11 | 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 |
反柯里化
?
1 2 3 | Function.prototype.uncurry = function () { return this .call.bind( this ); }; |
push 通用化
?
1 2 3 4 5 6 | var push = Array.prototype.push.uncurry(); var arr = []; push(arr, 1); push(arr, 2); push(arr, 3); console.log(arr |