文档章节

JavaScript 忍者秘籍 - 笔记

C
 Canaan_
发布于 2019/12/15 23:09
字数 1586
阅读 23
收藏 0
Elm

严格模式
这个模式是在ES5中引入的,它可以改变JavaScript 引擎的默认行为并执行更加严格的语法检查,一些在普通模式下的静默错误会在严格模式下抛出异常。开启严格模式:

"use strict";	//开启严格模式

调试工具

console.info
console.log
console.warn
console.error
console.assert 断言
console.time console.timeEnd 用时记录
console.table输出数组


立即函数

(function myFun(){
	//...
})();
(function(){}());
+function(){}();
-function(){}();
!function(){}();
~function(){}();

在立即函数的 特性能够模拟JavaScript中的模块化


函数参数

  • 实参(argument):调用函数时所传递给函数的值
  • 形参(parameter):定义函数时所列举的变量
    在函数内部可以使用 arguments 来引用所传进来的所有参数,要避免arguments当成 数组如果你为 arguments[0] 赋一个新值,那么,同时也会改变第一个参数的值

剩余参数

function multiMax(first,...remainingNumers){
	
};
multiMax(1,2,3,4,5);

默认参数

function(a,b='1',c=a+" "+b){
	
}

函数调用

  • 直接调用
    这时 this 有可能指向 window 或者是 undefined (在严格模式下)
  • 作为一个方法
    函数成为对象的一个属性,而调用该函数。那么this指向的就是该对象
  • 作为一个构造器 使用关键字new *函数会触发以下几个动作:
    1. 创建一个新的空对象。
    2. 该对象作为 this 参数传递给构造函数,从而成为构造函数的函数上下文
    3. 新构造的对象作为new 运算符的返回值*
function t1(){
	return 1;	//返回非对象类型
};
let a = new t1();	//创建的是一个Object,就是this 。返回值1被忽略
let val = t1();		//返回值是1
//--------------------------
let car = {};
function t2(){
	return car;
};
let a = new t2();	//创建的对象是 car 对象,this 将被丢弃
let val = t2();		//返回值也是 car 对象

  • 通过apply 或 call
    这是函数的方法。使用时要传下函数的上下文对象和调用参数
t1.apply(t1,[1,2,3]);
t1.call(t1,1,2,3);

  • 可以使用bind 方法来创建新函数
    所有函数都可以访问bind 方法,可以创建并返回一个新函数,并绑定在传入的对象上。不管函数如何调用,this是不会变
let button = {
	click:function(){}
}
button.click.bind(button);


生成器
能生成一组值 的序列,当运行标准函数时,它最多只生成一个值。然而生成器函数会在几次运行中暂停,因此每次运行都可能生成一个值。实际上调用生成器函数,会返回一个迭代器。

function* weaponGenerator(){
	yield "a";
	yield "b";
	yield "c";
}
for(let val of weaponGenerator()){
	// val
}
//------------------------------

let iter = weaponGenerator();
let val = iter.next();	//当返回undefined 就说明没有值了
val.done;		//该属性为false ,表明之后还有值
val.value;		//该属性是返回的值
let item;
while(!(item = iter.next()).done){
	// item.value
}
//------------------------

//递归
function* weaponGenerator(){
	yield "a";
	yield* subGenerator() ;
	yield "c";
}
function* subGenerator(){
	yield "1";
	yield "2";
}
//-------------------------

//生成唯一ID
function* idGenerator(){
	let id = 0;
	while(true){
		yield ++id;
	}
}
//遍历dom
function* domTraversal(elm){
	yield elm;
	elm = elm.firstElementChild;
	while(elm){
		yield* domTraversal(elm);
		elm = elm.nextElementSibling;
	}
}
//---------------------------------

//向生成器传值 ,通过 next 方法向生成器传值
function* myGenerator(arg){
	const imposter = yield("<<"+arg);
	yield imposter+">>";
}
let iter = myGenerator("book");
iter.next().value		// <<book
iter.next("paper").value;	//paper>>
//向生成器抛出异常
function* myGenerator(arg){
	try{
		 yield "<<"+arg;
	}catch(e){
		//e = xxx
	}
	
	yield imposter+">>";
}
iter.throw("xxx");


原型

let son = { ss:1 };
“ss” in son;		//属性是否存在
son.s1 = 1;		//添加属性
delete son.s1;	//删除属性
//--------------------
//原型链
let father = { ff:2 };
let grand = { gg:3 };
son.ss==1;	//true
Object.setPrototypeOf(son,father);
son.ff==2;	//true
Object.setPrototypeOf(father,grand)
son.gg==3;	//true
//说明:当访问对象上不存在的属性时,将查询对象原型。
//----------------------

//属性定义 Object.defineProperty 。为指定对象属性配置信息
Object.defineProperty(obj,"myProperty",{
	configurable:false,
	value:"新的属性",
	writable:true
})



Class

class People{
	let age;
	constructor(name){
		this.name = name;
	}
	//getter/setter
	get age(){}
	set age(value){}
	doJob(){
		//实例方法
	}
	static compare(){
		//静态方法
	}
}
//继承
class Man extends People{
	constructor(name,address){
		super(name);
		this.address = address
	}
	doRun(){
		//独有的方法
	}
}
let p = new People("张三");
p.name , p.address , p.doJob() , p.doRun() ,   People.compare() 




使用getter 和 setter 控制属性访问

let obj = {
	localVar:'xx',
	get name(){
		return this.localVar; 
	},
	set name(val){
		this.localVar = val;
	}
}
obj.name	// 通过 get 与 set 关键字
//通过 Object.defineProperty
let obj = {
	localVar:'xx'
}
Object.defineProperty(obj,'name',{
	get:()=>this.localVar,
	set:val=>this.localVar = val
})
//通过代理控制
let obj ={
	name:'xx'
}
let objProxy = new Proxy(obj,{
	get:(target,key)=>{
		return target[key];
	},
	set:(target,key,value)=>{
		target[key]=value;
	},
	apply:(target,thisArg,args)=>{
		//调用函数时激活
	},
	construct:()=>{
		//使用new 时激活
	},
	enumerate:()=>{
		//执行for-in 时激活
	},
	getPrototypeOf:()=>{
		//获取属性时激活
	},
	setPrototypeOf:()=>{
		//设置属性时激活
	}
});
objProxy.name;

集合

//Array 操作
let arr = [1,2,3,4,5];
arr.forEach(item=>{
	//遍历
});
let newArr = arr.map(item=>{
	return item+1;//映射,返回新的数组;
});
let booleanVal = arr.every(item=>{
	return true;//如果所有回调都返回true,则为true.否则为false
});
let booleanVal = arr.some(item=>{
	return true;//只要一个回调返回true,则为true,否则为false
});
let item = arr.find(item=>{
	return item==1;//找到第一次满足条件的元素
});
let newArr = arr.filter(item=>{
	return true;//过滤元素,并创建一个新的元素
});
let intVal = arr.findIndex(item=>{
	return true;//返回元素在数组中的索引
});
arr.sort((a,b)=>{
	return a-b;//排序,返回 >0,0,<0
});
let sumVal = arr.reduce((x,y)=>{
	return x+y; //可传入初始值,如0
},0);

复用内置的数组函数

let myArr = {
	length:0,
	add:(val)=>{
		Array.prototype.push.call(this.item);
	},
	find:(val)=>{
		Array.prototype.find.call(this,val);
	}
}

Map

let mapObj =new Map();
mapObj.set(1,{});
mapObj.get(1);
mapObj.size;
mapObj.has(1);
mapObj.delete(1);
mapObj.clear();
for(let item of mapObj){
	//item[0] key  
	//item[1] vallue
}
for(let key of mapObj.keys()){
	mapObj.get(key)
}
for(val of mapObj.values()){
	
}

Set

let set = new Set([1,2,3]);
set.add(5);
set.has(1);
set.size;
for(let item of set){
	
}
//并集
new Set([...arr1,...arr2]);
//交集
new Set([...set1].filter(val=>set2.has(val)));
//差集
new Set([...set1].filter(val=>!set2.has(val)));

模块化

// export.js
export let msg = "xx";  //导出变量
export function f1(){}  //导出函数
export class People{} //导出类
export {msg,f1}; //导出存在对象 
export {msg as xx} //别名导出
export default { //导出默认
	
};

//import.js
import {msg,f1} from 'export.js' //命名导入
import * as myModule from 'export.js' //全部导入
import obj from 'export.js';  //存在默认导入
import obj,{msg} from 'export.js' //
import {msg as xx} from 'export.js' //别名导入


模板字符串

let param = {
	name:'xx',
	age:1
}
let str = `name:${param.name}  age:${param.age}`;
let str2 = `name:${param.name}
age:${param.age}`; //多行

解构

let obj = {
	a:'a',
	b:'b'
}
const {a,b} = obj;
const [a,b,c] = array;
const [,,c]=array;
const [a,..o] = array;

增强字面量

const obj = {
	name,
	data(){
		
	},
	['new'+name]:true  //一个动态的属性名
}


© 著作权归作者所有

下一篇: Git - cherry pick
C
粉丝 21
博文 425
码字总数 175317
作品 0
福州
私信 提问
JS忍者秘籍中的定时器机制详解

前言 前段时间刚看完《JS忍者秘籍》,虽说是15年出版的,有些东西是过时了,但像对原型链、闭包、正则、定时器之类的机制却是不会过时的,里面很多东西都讲的很细,还是值得一读的,本文将对...

OBKoro1
2018/10/29
0
0
JavaScript:从此不再怕闭包

闭包就好像从JavaScript中分离出来的一个充满神秘色彩的未开化世界,只有最勇敢的人才能到达那里。——《你不知道的JavaScript 上卷》 1、起源 js闭包很长一段时间里都是让我头疼的一个东西。...

青年Wat
2019/05/19
0
0
简单的JavaScript继承(译)

这篇文章翻译自John Resig(jQuery的作者)的博客,原文地址。 为了正在写的这本书(译者注:这本书是《忍者秘籍》),我最近做了许多关于JavaScript继承的工作,并在此基础上研究了几种不同...

王兴欣
2018/10/29
0
0
美丽的闭包,在js中实现函数重载

引言 最近在js的学习中,看到了函数重载的问题,一开始,只看到了实现代码,看着代码冥思苦想了半个小时,总算是理清了其实现的原理,也为其实现的巧妙感到赞叹,也是在自己搞懂原理之后,去网...

鲍康霖
2018/06/17
0
0
cocos2d-x支持c++、js、lua开发

作者:左文 链接:https://www.zhihu.com/question/21130385/answer/21789568 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 纯属个人观点 1 Unity3d支...

壹峰
2017/10/18
306
0

没有更多内容

加载失败,请刷新页面

加载更多

Numpy处理图片方法

在进行图像领域的深度学习的时候经常需要对图片进行处理,包括图像的翻转,压缩,截取等,一般都是用Numpy来处理。处理起来也很方便。 In[3] # 导入需要的包 import numpy as np import matp...

北方的郎
25分钟前
7
0
AMD集中擢升高管:从Intel挖了个高手

  1 月 17 日,AMD 官方宣布多项人事升迁、新人任命,擢升了四位高级副总裁:   AMD 同时还宣布, 聘请行业资深人士 Daniel McNamara 出任高级副总裁兼服务器业务部总经理,负责在第二代...

水果黄瓜
29分钟前
6
0
什么是泛型?

一、泛型的概念 泛型是 Java SE5 出现的新特性,泛型的本质是类型参数化或参数化类型,在不创建新的类型的情况下,通过泛型指定的不同类型来控制形参具体限制的类型。 二、泛型的意义 一般的...

hncboy
今天
8
0
dynamic-connectivity 动态连通性问题之 quick-union 算法

quick-union 的思想是:若对象 p 的 root_id 和对象 q 的 root_id 相等,则认为 p 和 q 连通。 若要将对象 p 和对象 q 连通(已知两对象未连通),则将 p 的 root_id 的值设为 q 的 root_id ...

Phpythoner_Alei
今天
51
0
OSChina 周六乱弹 —— 实在选不出来就唱国歌

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享阿冗的单曲《你的答案》。--祝大家在2020年都找到自己答案。 《你的答案》- 阿冗 手机党少年们想听歌,请使劲...

小小编辑
今天
315
6

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部