JavaScript知识精简
JS单线程,同步,一次执行某一段代码,等到前一个程序执行完毕再执行。,阻塞,安全。
多线程,异步,不用等到前一个程序执行完毕就执行。
数据类型
JavaScript 是 弱类型 语言,但并不是没有类型,JavaScript可以识别下面 7 种不同类型的值:
基本数据类型
- Boolean
- Number
- String
- null
- undefined
- Symbol
Object
- 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) - 直接使用:全局作用域
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;
函数
一个函数就是一个可以被外部代码调用(或者函数本身递归调用)的 子程序
定义函数
- 函数声明
- 函数表达式
- Function 构造函数
- 箭头函数
function fn(){}
var fn = function(){}
var fn = new Function(arg1, arg2, ... argN, funcBody)
var fn = (param) => {}
arguments
- arguments: 一个包含了传递给当前执行函数参数的类似于数组的对象
- arguments.length: 传给函数的参数的数目
arguments.caller: 调用当前执行函数的函数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)
定义对象
- 字面量
- 构造函数
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('Byron');
var p2 = new Person('Casper');
p1.print();
p2.print();
this 和作用域
作用域可以通俗的理解
- 我是谁
- 我有哪些马仔
其中我是谁的回答就是 this
马仔就是我的局部变量
this 场景
普通函数
- 严格模式:
undefined
- 非严格模式: 全局对象
- Node:
global
- 浏览器:
window
构造函数:对象的实例
对象方法:对象本身
call & apply
- fn.call(context, arg1, arg2, …, argn)
- 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 的场景,继承有两个目标,子类需要得到父类的:
- 对象的属性
- 对象的方法
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);
});
闭包
闭包由两部分组成
- 函数
- 环境:函数创建时作用域内的局部变量
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));
尾递归
- 尾调用是指某个函数的最后一步是调用另一个函数
- 函数调用自身,称为递归
- 如果尾调用自身,就称为尾递归
递归很容易发生"栈溢出"错误(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);
友情链接:http://www.cnblogs.com/dolphinX/p/5565753.html
JavaScript知识精简的更多相关文章
- 《jQuery风暴》第2章 必须知道的JavaScript知识
第2章 必须知道的JavaScript知识 JavaScript是jQuery应用的基础,掌握JavaScript这门语言是使用jQuery的基础条件.本章不会全面细致的讲解JavaScript的全部 ...
- 【原文】前端程序员必须知道的高性能Javascript知识
原文:前端程序员必须知道的高性能Javascript知识 想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...
- Javascript知识——事件
O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...
- Javascript知识四(DOM)
[箴 10:4] 手懒的,要受贫穷:手勤的,却要富足. He becometh poor that dealeth with a slack hand: but the hand of the di ...
- WEBBASE篇: 第十一篇, JavaScript知识6
JavaScript 知识6 一, String 对象 1,分隔字符串, 函数: split(seperator) 作用: 将字符串,通过seperator 拆分成一个数组: eg: var msg= ...
- WEBBASE篇: 第十篇, JavaScript知识5
JavaScript知识5 <!doctype html> <html lang="en"> <head> <meta charset=& ...
- Lodash 严重安全漏洞背后 你不得不知道的 JavaScript 知识
摘要: 详解原型污染. 原文:Lodash 严重安全漏洞背后 你不得不知道的 JavaScript 知识 作者:Lucas HC Fundebug经授权转载,版权归原作者所有. 可能有信息敏感的同学已 ...
- javaScript知识储备
javaScript知识储备 组成 ECMAScript(核心) 提供语法.变量等,遵循ECMA-262标准 DOM(文档对象模型) 提供操作HTML标签的API,遵循W3C规范 BOM(浏览器对象模 ...
- 一行css代码调试中学到的javascript知识,很有意思
现在到处都是JavaScript,每天都能知道点新东西.一旦你入了门,你总能从这里或是那里领悟到很多知识.今天我想分享Addy Osmani的一行代码 ,这行代码对于你调试你的CSS是很有用的.为了可 ...
随机推荐
- 【网络编程】——Lighttpd 返回HTTP/1.1 417 Expectation Failed
最近在使用python 的 pcurl 发送 post 请求到服务端的时候[服务端使用的服务是Lighttpd],发现只要 post 请求的数据超过 1024 之后,就会返回如下错误: * Hostn ...
- js 可拖动div 调整大小
dragBorder: function (parent, right, bottom, bottomRight) { var isDownRight = false; var isDownBotto ...
- tracert traceroute
二者都用于探测数据包从源到目的经过路由的IP,但两者探测的方法却有差别.不同点:一.应用环境不同tracert是应用在windows下.traceroute则是应用在linux/BSD/router/ ...
- python一个简单的打包例子
最近写了一些工具,想到分享给同事时好麻烦,并且自己每次用也是需要打开pycharm这些工具,感觉很麻烦,因此想到打包,网上有些例子,照做后又摸索很久方成,索性记录一下,以备不时之需. 主要参考:htt ...
- Unity编辑器中分割线拖拽的实现
GUI splitter control How can I make a GUI splitter control, similar to the splitter the console has? ...
- 织梦channelartlist标签当前栏目高亮
channelartlist标签完美支持currentstyle属性,实现自动加载当前栏目CSS样式,可以用来标识当前栏目位置的CSS,解决方法如下: 打开文件include\taglib\chann ...
- PHPExcel所遇到问题的知识点总结
工作中进行excel的时候遇到了两个问题, 1.excel表中列值过大,由于没有进行特殊处理,程序没法正常运行: 2.列值中含有日期格式的文本,不能正确读取: 所以通过网络搜索,并解决了问题,记录一下 ...
- xib view frame 大小调整
1.IOS - xib(Interface Builder,view) - can't change view size(view不能改变大小问题) 很多时候,我们自定义tableview.colle ...
- 提高MySQL数据库的安全性
1. 更改默认端口(默认3306) 可以从一定程度上防止端口扫描工具的扫描 2. 删除掉test数据库 drop database test; 3. 密码改的复杂些 # 1 set password ...
- Delphi过程函数传递参数的几种方式
Delphi过程函数传递参数的几种方式 在Delphi过程.函数中传递参数几个修饰符为Const.Var.Out. 另一种不加修饰符的为默认按值传递参数. 一.默认方式以值方式传递参数 proced ...