JS单线程,同步,一次执行某一段代码,等到前一个程序执行完毕再执行。,阻塞,安全。

多线程,异步,不用等到前一个程序执行完毕就执行。

数据类型

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. typeof false // "boolean"
  2. typeof .2 // "number"
  3. typeof NaN // "number"
  4. typeof '' // "string"
  5. typeof undefined // "undefined"
  6. typeof Symbol() // "symbol"
  7. typeof new Date() // "object"
  8. typeof [] // "object"
  9. typeof alert // "function"
  10. typeof null // "object"
  11. typeof not_defined_var // "undefined"

变量

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

声明

  1. 使用关键字 var :函数作用域
  2. 使用关键字 let :块作用域 (block scope local variable)
  3. 直接使用:全局作用域
  1. var global_var = 1;
  2. function fn () {
  3. var fn_var = 2;
  4. if(fn_var > 10){
  5. let block_var = 3;
  6. global_var2 = 4;
  7. }
  8. }

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

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

  1. const num = 1;
  2. const obj = {
  3. prop: 'value'
  4. };
  5. num = 2; // Uncaught TypeError: Assignment to constant variable.
  6. obj['prop'] = 'value2';
  7. obj = []; // Uncaught TypeError: Assignment to constant variable.

变量提升

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

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

等同于

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

函数

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

定义函数

  1. 函数声明
  2. 函数表达式
  3. Function 构造函数
  4. 箭头函数
  1. function fn(){}
  2. var fn = function(){}
  3. var fn = new Function(arg1, arg2, ... argN, funcBody)
  4. var fn = (param) => {}

arguments

  1. arguments:  一个包含了传递给当前执行函数参数的类似于数组的对象
  2. arguments.length: 传给函数的参数的数目
  3. arguments.caller: 调用当前执行函数的函数
  4. arguments.callee: 当前正在执行的函数
  1. function foo() {
  2. return arguments;
  3. }
  4. foo(1, 2, 3); // Arguments[3]
  5. // { "0": 1, "1": 2, "2": 3 }

rest

  1. function foo(...args) {
  2. return args;
  3. }
  4. foo(1, 2, 3); // Array[3]
  5. // [1, 2, 3]
  6. function fn(a, b, ...args){
  7. return args;
  8. }
  9. fn(1, 2, 3, 4, 5); // Array[3]
  10. // [3, 4, 5]

default

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

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

对象

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

定义对象

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

构造函数

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

函数的返回值有两种可能

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

构造函数返回值

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

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

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

prototype

  1. 每个函数都有一个 prototype 的对象属性,对象内有一个 constructor 属性,默认指向函数本身
  2. 每个对象都有一个 __proto__ 的属性,属相指向其父类型的 prototype
  1. function Person(name) {
  2. this.name = name;
  3. }
  4. Person.prototype.print = function () {
  5. console.log(this.name);
  6. };
  7. var p1 = new Person('Byron');
  8. var p2 = new Person('Casper');
  9. p1.print();
  10. 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. function isNumber(obj) {
  2. return Object.prototype.toString.call(obj) === '[object Number]';
  3. }

Function.prototype.bind

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

  1. function fn() {
  2. this.i = 0;
  3. setInterval(function () {
  4. console.log(this.i++);
  5. }.bind(this), 500)
  6. }
  7. fn();

() => {}

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

  1. function fn() {
  2. this.i = 0;
  3. setInterval(() => {
  4. console.log(this.i++);
  5. }, 500)
  6. }
  7. fn();

继承

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

  1. 对象的属性
  2. 对象的方法
  1. function inherits(child, parent) {
  2. var _proptotype = Object.create(parent.prototype);
  3. _proptotype.constructor = child.prototype.constructor;
  4. child.prototype = _proptotype;
  5. }
  6. function People(name, age) {
  7. this.name = name;
  8. this.age = age;
  9. }
  10. People.prototype.getName = function () {
  11. return this.name;
  12. }
  13. function English(name, age, language) {
  14. People.call(this, name, age);
  15. this.language = language;
  16. }
  17. inherits(English, People);
  18. English.prototype.introduce = function () {
  19. console.log('Hi, I am ' + this.getName());
  20. console.log('I speak ' + this.language);
  21. }
  22. function Chinese(name, age, language) {
  23. People.call(this, name, age);
  24. this.language = language;
  25. }
  26. inherits(Chinese, People);
  27. Chinese.prototype.introduce = function () {
  28. console.log('你好,我是' + this.getName());
  29. console.log('我说' + this.language);
  30. }
  31. var en = new English('Byron', 26, 'English');
  32. var cn = new Chinese('色拉油', 27, '汉语');
  33. en.introduce();
  34. cn.introduce();

ES6 class 与继承

  1. "use strict";
  2. class People{
  3. constructor(name, age){
  4. this.name = name;
  5. this.age = age;
  6. }
  7. getName(){
  8. return this.name;
  9. }
  10. }
  11. class English extends People{
  12. constructor(name, age, language){
  13. super(name, age);
  14. this.language = language;
  15. }
  16. introduce(){
  17. console.log('Hi, I am ' + this.getName());
  18. console.log('I speak ' + this.language);
  19. }
  20. }
  21. let en = new English('Byron', 26, 'English');
  22. en.introduce();

语法

label statement

  1. loop:
  2. for (var i = 0; i < 10; i++) {
  3. for (var j = 0; j < 5; j++) {
  4. console.log(j);
  5. if (j === 1) {
  6. break loop;
  7. }
  8. }
  9. }
  10. console.log(i);

语句与表达式

  1. var x = { a:1 };
  2. { a:1 }
  3. { a:1, b:2 }

立即执行函数

  1. ( function() {}() );
  2. ( function() {} )();
  3. [ function() {}() ];
  4. ~ function() {}();
  5. ! function() {}();
  6. + function() {}();
  7. - function() {}();
  8. delete function() {}();
  9. typeof function() {}();
  10. void function() {}();
  11. new function() {}();
  12. new function() {};
  13. var f = function() {}();
  14. 1, function() {}();
  15. 1 ^ function() {}();
  16. 1 > function() {}();

高阶函数

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

回调函数

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

闭包

闭包由两部分组成

  1. 函数
  2. 环境:函数创建时作用域内的局部变量
  1. function makeCounter(init) {
  2. var init = init || 0;
  3. return function(){
  4. return ++init;
  5. }
  6. }
  7. var counter = makeCounter(10);
  8. console.log(counter());
  9. console.log(counter());

典型错误

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

  1. for (var i = 0; i < doms.length; i++) {
  2. (function (i) {
  3. doms.eq(i).on('click', function (ev) {
  4. console.log(i);
  5. });
  6. })(i);
  7. }

惰性函数

  1. function eventBinderGenerator() {
  2. if (window.addEventListener) {
  3. return function (element, type, handler) {
  4. element.addEventListener(type, hanlder, false);
  5. }
  6. } else {
  7. return function (element, type, handler) {
  8. element.attachEvent('on' + type, handler.bind(element, window.event));
  9. }
  10. }
  11. }
  12. var addEvent = eventBinderGenerator();

柯里化

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

  1. function isType(type) {
  2. return function(obj){
  3. return Object.prototype.toString.call(obj) === '[object '+ type +']';
  4. }
  5. }
  6. var isNumber = isType('Number');
  7. console.log(isNumber(1));
  8. console.log(isNumber('s'));
  9. var isArray = isType('Array');
  10. console.log(isArray(1));
  11. console.log(isArray([1, 2, 3]));
  1. function f(n) {
  2. return n * n;
  3. }
  4. function g(n) {
  5. return n * 2;
  6. }
  7. console.log(f(g(5)));
  8. function pipe(f, g) {
  9. return function () {
  10. return f.call(null, g.apply(null, arguments));
  11. }
  12. }
  13. var fn = pipe(f, g);
  14. console.log(fn(5));

尾递归

  1. 尾调用是指某个函数的最后一步是调用另一个函数
  2. 函数调用自身,称为递归
  3. 如果尾调用自身,就称为尾递归

递归很容易发生"栈溢出"错误(stack overflow)

  1. function factorial(n) {
  2. if (n === 1) return 1;
  3. return n * factorial(n - 1);
  4. }
  5. factorial(5) // 120

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

  1. function factorial(n, total) {
  2. if (n === 1) return total;
  3. return factorial(n - 1, n * total);
  4. }
  5. factorial(5, 1) // 120

柯里化减少参数

  1. function currying(fn, n) {
  2. return function (m) {
  3. return fn.call(this, m, n);
  4. };
  5. }
  6. function tailFactorial(n, total) {
  7. if (n === 1) return total;
  8. return tailFactorial(n - 1, n * total);
  9. }
  10. const factorial = currying(tailFactorial, 1);
  11. factorial(5) // 120

反柯里化

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

push 通用化

  1. var push = Array.prototype.push.uncurry();
  2. var arr = [];
  3. push(arr, 1);
  4. push(arr, 2);
  5. push(arr, 3);
  6. console.log(arr);

友情链接:http://www.cnblogs.com/dolphinX/p/5565753.html

 
 
 

JavaScript知识精简的更多相关文章

  1. 《jQuery风暴》第2章 必须知道的JavaScript知识

    第2章 必须知道的JavaScript知识 JavaScript是jQuery应用的基础,掌握JavaScript这门语言是使用jQuery的基础条件.本章不会全面细致的讲解JavaScript的全部 ...

  2. 【原文】前端程序员必须知道的高性能Javascript知识

    原文:前端程序员必须知道的高性能Javascript知识 想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...

  3. Javascript知识——事件

    O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...

  4. Javascript知识四(DOM)

     [箴 10:4] 手懒的,要受贫穷:手勤的,却要富足. He becometh poor that dealeth with a slack hand: but the hand of the di ...

  5. WEBBASE篇: 第十一篇, JavaScript知识6

    JavaScript 知识6 一, String 对象 1,分隔字符串, 函数: split(seperator) 作用: 将字符串,通过seperator 拆分成一个数组: eg: var msg= ...

  6. WEBBASE篇: 第十篇, JavaScript知识5

    JavaScript知识5 <!doctype html> <html lang="en"> <head> <meta charset=& ...

  7. Lodash 严重安全漏洞背后 你不得不知道的 JavaScript 知识

    摘要: 详解原型污染. 原文:Lodash 严重安全漏洞背后 你不得不知道的 JavaScript 知识 作者:Lucas HC Fundebug经授权转载,版权归原作者所有. 可能有信息敏感的同学已 ...

  8. javaScript知识储备

    javaScript知识储备 组成 ECMAScript(核心) 提供语法.变量等,遵循ECMA-262标准 DOM(文档对象模型) 提供操作HTML标签的API,遵循W3C规范 BOM(浏览器对象模 ...

  9. 一行css代码调试中学到的javascript知识,很有意思

    现在到处都是JavaScript,每天都能知道点新东西.一旦你入了门,你总能从这里或是那里领悟到很多知识.今天我想分享Addy Osmani的一行代码 ,这行代码对于你调试你的CSS是很有用的.为了可 ...

随机推荐

  1. 【网络编程】——Lighttpd 返回HTTP/1.1 417 Expectation Failed

    最近在使用python 的 pcurl 发送 post 请求到服务端的时候[服务端使用的服务是Lighttpd],发现只要 post 请求的数据超过 1024 之后,就会返回如下错误: * Hostn ...

  2. js 可拖动div 调整大小

    dragBorder: function (parent, right, bottom, bottomRight) { var isDownRight = false; var isDownBotto ...

  3. tracert traceroute

    二者都用于探测数据包从源到目的经过路由的IP,但两者探测的方法却有差别.不同点:一.应用环境不同tracert是应用在windows下.traceroute则是应用在linux/BSD/router/ ...

  4. python一个简单的打包例子

    最近写了一些工具,想到分享给同事时好麻烦,并且自己每次用也是需要打开pycharm这些工具,感觉很麻烦,因此想到打包,网上有些例子,照做后又摸索很久方成,索性记录一下,以备不时之需. 主要参考:htt ...

  5. Unity编辑器中分割线拖拽的实现

    GUI splitter control How can I make a GUI splitter control, similar to the splitter the console has? ...

  6. 织梦channelartlist标签当前栏目高亮

    channelartlist标签完美支持currentstyle属性,实现自动加载当前栏目CSS样式,可以用来标识当前栏目位置的CSS,解决方法如下: 打开文件include\taglib\chann ...

  7. PHPExcel所遇到问题的知识点总结

    工作中进行excel的时候遇到了两个问题, 1.excel表中列值过大,由于没有进行特殊处理,程序没法正常运行: 2.列值中含有日期格式的文本,不能正确读取: 所以通过网络搜索,并解决了问题,记录一下 ...

  8. xib view frame 大小调整

    1.IOS - xib(Interface Builder,view) - can't change view size(view不能改变大小问题) 很多时候,我们自定义tableview.colle ...

  9. 提高MySQL数据库的安全性

    1. 更改默认端口(默认3306) 可以从一定程度上防止端口扫描工具的扫描 2. 删除掉test数据库 drop database test; 3. 密码改的复杂些 # 1 set password ...

  10. Delphi过程函数传递参数的几种方式

    Delphi过程函数传递参数的几种方式  在Delphi过程.函数中传递参数几个修饰符为Const.Var.Out. 另一种不加修饰符的为默认按值传递参数. 一.默认方式以值方式传递参数 proced ...