木子 旭的博客

bwip.js的使用简单说明

(function(){ let privateVariable = 10; function privateFunction(){ return false; } MyObject = function(){}; MyObject.prototype.publicMethod = function(){ privateVariable++; return privateFunction(); };})();在这个模式中，匿名函数表达是创建了一个包含构造函数及其方法的私有

1.什么是私有变量function add(num1,num2){ let sum = num1 + num2; return sum;}num1，num2和sum就是私有变量，这几个变量只能在函数内部使用。2.什么是特权方法function MyObject(){ let privateVariable = 10; function privateFunction(){ return false; } this.publicMethod = function(){ pr

1.什么是立即调用的函数表达式(function(){ //块级作用域})();上面第一组括号后面的第二组括号会立即调用前面的函数表达式。只要函数执行完毕，其作用域链就可以被销毁。

function assignHandler(){ let element = document.getElementById('someElement'); element.onclick = () => console.log(element.id);}上面的代码创建了一个闭包，即element元素的事件处理程序。而这个处理程序又创建了一个循环引用。匿名函数引用着assignHandler()的活动对象，组织了对element的引用计数归零。只要这个匿名函数存在，element的

window.identity = 'The Window';let object = { identity:'My Object', getIdentityFunc(){ return function(){ return this.identity; } }}console.log(object.getIdentityFunc()());//the Window内部函数永远不可能直接访问外部函数的this和arguments这两个变量，所以上述代码中的this指向了wi

function createComparisonFunction(propertyName){ return function(object1,object2){ let value1 = object1[propertyName]; let value2 = object2[propertyName]; if(value1 < value2){ return -1; }else if(value1 > value2){ return 1; }else{

1.尾调用优化的条件代码在严格模式下执行。外部函数的返回值是对尾调用函数的调用。尾调用函数返回后不需要执行额外的逻辑。尾调用函数不是引用外部函数作用域中自由变量的闭包。下面是无尾调用优化的例子："user strict"//无优化：尾调用没有返回function outerFunction(){ innerFunction();}//无优化：尾调用没有直接返回function outerFunction(){ let innerResult = innerFunction()

function factorial(num){ if(num <= 1 ){ return 1; }else{ return num * factorial(num-1) }}上面就是一个递归函数，递归函数通常的形式是一个函数通过名称调用自己。function factorial(num){ if(num <= 1 ){ return 1; }else{ return num * factorial(num-1) }}let anotherFacto

if(condition){ function sayHi(){ console.log('Hi!'); }}else{ function sayHi(){ console.log('Yo!'); }}let sayHi；if(condition){ sayHi =function(){ console.log('Hi!'); }}else{ sayHi = function(){ console.log('Yo!'); }}上述是函数申明的写法，但是在E

1.length属性function aaa(a1){ }function bbb(a1,a2){}function ccc(a1,a2,a3){ }console.log(aaa.length);//1console.log(bbb.length);//2console.log(ccc.length);//3length属性保存函数定义的命名参数的个数。2.apply和call方法function sum(num1,num2){ console.log(num1 +

function aaa(){ if(!new.target){ console.log(111); }else{ console.log(222); console.log(new.target); }}new aaa();//222aaa();//111,ƒ aaa()ECMAScript中的函数始终可以作为构造函数实例化一个新对象，也可以作为普通函数被调用。如果函数正常调用，则new.target的值是undefined；如果是使用new关键字调用的，则new.tar

function aaa(){ bbb(); console.log(aaa.caller);//null}function bbb(){ console.log(bbb.caller);//ƒ aaa() console.log(arguments.callee.caller);//ƒ aaa()}aaa();函数对象上的caller属性引用的是调用当前函数的函数（父函数）。如果在全局作用域调用的则为null。如果要降低耦合度，可以通过arguments.callee.calle

1.在标准函数中window.color = "red";let o ={ color:'blue'}function sayColor(){ console.log(this.color);}sayColor();//redo.sssColor = sayColor;o.sssColor();//blue在标准函数中，this引用的是把函数当成方法调用的上下文对象。在网页的全局上下文调用函数时，this指向windows。使用对象调用函数的话，函数中的this会指向该对

function aaa(){ console.log(arguments[0]);//1 console.log(arguments[1]);//2 console.log(arguments[2]);//3 console.log(arguments[3]);//4}aaa(1,2,3,4,5);arguments对象可以调用函数中传入的参数。function sum(num1,num2){ console.log(arguments.callee);//ƒ sum(num1,n

function add10(num){ return num +10;}function callSomeFunction(someFunction, someArgumnet){ return someFunction(someArgumnet);}console.log(callSomeFunction(add10,20));//30函数的参数可以是一个函数。如果将函数作为参数传入进去，那么不要在后面加上括号。function aaa(){ return function(a

1.函数申明console.log(sum(10,10));//20function sum(num1,num2){ return num1 + num2;}上面例子中是函数申明。在执行代码的时候，JavaScript引擎会先执行一遍扫描，把发现的函数声明提高到源代码树的顶部，所以可以再函数申明之前使用这个函数。2.函数表达式console.log(sum(10,10));//ReferenceError: sum is not definedlet sum = function(n

function aaa(a1,...values){ console.log(a1);//1 console.log(values);//[2,3,4,5,6,7]};aaa(1,2,3,4,5,6,7);收集参数就是上面例子中的...values收集参数只能作为最后一个参数（不能在a1前面）let getSum = (...values) =>{ console.log(values);//[1,2,3]}getSum(1,2,3);箭头函数不支持arguments

function getProduct(a,b,c=1){ return a*b*c;}console.log(getProduct(...[1,2]));//2console.log(getProduct(...[1,2,3]));//6console.log(getProduct(...[1,2,3,4]));//6console.log(getProduct(...[1,2],...[5,2]));//10可以使用扩展操作符来进行传参。...

function makeKing(name = 'Henry',numerals = 'VIII'){ return `King ${name} ${numerals}`}console.log(makeKing());//King Henry VIIIconsole.log(makeKing(undefined,'V'));//King Henry V可以在参数中使用‘=’给参数赋一个默认值。当传入的参数为undefined时就会使用这个默认参数值。function makeKing

function addSomeNumber(num){ return num + 100;}function addSomeNumber(num){ return num + 200;}let result = addSomeNumber(100);console.log(result);//300ECMAScript函数不能像传统编程那样重载。如果ECMAScript中定义了两个同名函数，则后定义的会覆盖先定义的。...

ECMAScript函数既不关心传入的参数个数，也不关心这些参数的数据类型。定义函数时要接收两个参数，并不意味着调用时就必须要传入两个参数，你可以传一个、两个、三个，甚至一个也不传。function sayHi(name,message){ console.log(`Hello ${name},${message}`);}function sayHi1(name,message){ console.log(`Hello ${arguments[0]},${arguments[1]}`)；.

1.一个函数可以有多个函数名function sum(num1, num2){ return num1 + num2;}console.log(sum(10,10));//20let anotherSum = sum;console.log(anotherSum(10,10));//20sum = null;console.log(anotherSum(10,10));//20使用不带括号的函数名会访问函数指针，而不会执行函数。anotherSum和sum都指向同一个函数。把

1.箭头函数实例化的函数兑现与正式的函数表达式创建的函数对象行为是相同的，任何可以使用函数表达式的地方，都可以使用箭头函数。let arrowSum = (a,b) => { return a + b;};let functionExpressionSum = function(a,b){ return a + b;};console.log(arrowSum(5,8));//13console.log(functionExpressionSum(5,8));//132.箭头函

1.函数声明的方式定义函数function sum(num1,num2){ return num1 + num2;}函数定义后面没有加分号2.函数表达式的方式定义函数let sum = function(num1,num2){ return num1+num2;}function关键字后面没有名称，因为不需要，这个函数可以通过变量sum来引用。函数表达式的末尾是有分号的。3.箭头函数let sum = (num1,num2)=>{ return num1 + nu

1.跟踪属性访问const user = { name: 'Jake'};const proxy = new Proxy(user,{ get(target,property,receiver){ console.log(`Getting ${property}`); return Reflect.get(...arguments); }, set(target,property,value,receiver){ console.log(`Setting ${property}

内容简介代理可以捕获13种不同的基本操作。这些操作有各自不同的反射API方法、参数、关联ECMAScript操作和不变式。有几种不同的JavaScript操作会调用同一个捕获器处理程序。对于在代理对象上执行的任何一种操作，只会有一个捕获处理程序被调用，不会存在重复捕获的情况。只要在代理上调用，所有的捕获器都会拦截它们对应的反射API操作。1.get（）const myTarget = {};const proxy = new Proxy(myTarget,{ get(target,pro

1.代理中的thisconst wm = new WeakMap();class User{ constructor(userId){ wm.set(this,userId); } set id(userId){ wm.set(this,userId); } get id(){ return wm.get(this); }}const user = new User(123);console.log(user.id);//123const userInstan

const target = { foo:'bar'};const firstProxy = new Proxy(target,{ get(){ console.log('first proxy'); return Reflect.get(...arguments); }});const secondProxy = new Proxy(firstProxy,{ get(){ console.log('second proxy'); return Reflect.get(.

1.反射API与对象API反射API并不限于捕获处理程序。大多数反射API方法在Object类型上有对应的方法。通常Object方法适用于处理通用函数，而反射方法适用于细粒度的对象控制与操作。2.反射状态的状态标记const o = {};if(Reflect.defineProperty(o,'foo',{value:'bar'})){ console.log('success');}else{ console.log('failure');}上述例子如果定义新属性时发生问

const target = { foo: 'bar'};const handler = { get(){ return 'intercepted'; }};const {proxy,revoke} = Proxy.revocable(target,handler);console.log(proxy.foo);//interceptedconsole.log(target.foo);//barrevoke();console.log(proxy.foo);//TypeEr

const target = {};Object.defineProperty(target,'foo',{ configurable:false, writable:false, value:'bar'});const handler = { get(){ return 'qux'; }}const proxy = new Proxy(target,handler);console.log(proxy.foo);//'get' on proxy: property 'foo' i

1.捕获器参数const target = { foo:'bar',};const handler = { get(trapTarget,property,receiver){ console.log(trapTarget === target); console.log(property); console.log(receiver === proxy); }};const proxy = new Proxy(target,handler);proxy.foo;//true

1.什么是捕获器捕获器就是在处理程序对象中定义的“基本操作的拦截器”。每个处理程序对象可以包含零个或多个捕获器。每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。2.捕获器示例const target = { foo:'bar'};const handler = { get(){ return 'handler override'; }};cons

const target = { id: 'target'}const handler ={}const proxy = new Proxy(target, handler);console.log(target.id);//targetconsole.log(proxy.id);//targetid属性会访问同一个值target.id = "foo";console.log(target.id);//fooconsole.log(proxy.id);//foo给目标属性

1.继承基础class Vehicle{}class Bus extends Vehicle{}let b = new Bus();console.log(b instanceof Bus);//trueconsole.log(b instanceof Vehicle);//truefunction Person(){}class Engineer extends Person{}let e = new Engineer();console.log(e instanceof Engin

1.实例成员class Person{ constructor(){ this.name = new String('Jack'); this.sayName = () => console.log(this.name); this.nicknames = ['Jake','J-Dog'] }}let p1 = new Person(), p2 = new Person();p1.sayName();p2.sayName();console.log(p1.name

1.constructor关键字constructor关键字用于在类定义块内部创建类的构造函数。方法名constructor会告诉解释器在使用new操作符创建类的新实例时，应该调用这个函数。构造函数的定义不是必需的，不定义构造函数详单与将构造函数定义为空函数。2.实例化使用new操作符实例化Person的操作等于使用new调用其构造函数。JavaScript解释器知道使用new和类意味着应该使用constructor函数进行实例化。使用new调用类的构造函数会执行如下操作。（1）在内存

1.函数申明可以提升，类定义不能提升

function inheritPrototype(bbb,aaa){ let prototype = Object(aaa.prototype); prototype.constructor = bbb; bbb.prototype = prototype;}function Aaa(name){ this.name = name; this.colors=["red","blue","green"];}Aaa.prototype.sayName = function(){ con