发表于 | 分类于

合成事件

React基于虚拟DOM实现了一个合成事件层，我们所定义的事件处理器会接收到一个合成事件对象的实例，它完全符合 W3C 标准，不会存在任何IE标准的兼容问题。并且与原生浏览器具有一样的接口，同样支持事件冒泡机制，可用 stopPropagation() 和 preventDefault() 来中断它。所有事件都自动绑定在最外层上。如果需要访问原生事件对象，可以使用nativeEvent属性。

阅读全文 »

发表于 | 分类于

​ react日常开发过程中我们经常会遇到一些警告，如：Each child in an array or iterator should have a unique “key” prop。 为了省事我们通常会使用index作为key，警告不见了效果好像也没什么问题。但是真的没问题吗？

阅读全文 »

发表于 | 分类于

下面的代码如果使用var，最后输出的是10。

1
2
3
4
5
6
7
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

1
2
3
4
5
6
7
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

1
2
3
4
5
6
7
for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

引自阮老师es6

发表于 | 分类于

核心思想

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let mod = {
    exports : {

    }
}
const fn = function(exports,module,require,__filename,__dirname){
    
    this.avg = 'aaaa'
    module.exports = {
        gg : 1
    }
    exports.xxxx = {aaa : 2} //不可以这样导出 exports = {}，相当于exports指向新的引用，外部引用并没有改变   

};
fn.call(mod.exports,mod.exports,mod,__filename,__dirname)
console.log(mod.exports)
阅读全文 »

发表于 | 分类于

import()

动态 import() 语法目前只是一个 ECMAScript (JavaScript) 提案， 而不是正式的语法标准。预计在不远的将来就会被正式接受。

当 Webpack 解析到该语法时，它会自动地开始进行代码分割。如果你使用 Create React App，该功能已配置好，你能立刻使用这个特性。Next.js 也已支持该特性而无需再配置。

1
2
3
import("./math").then(math => {
  console.log(math.add(16, 26));
});

react.lazy

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
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function LazyComp(){
  return (
    <Suspense fallback={<div>Loading...</div>}>
    <section>
      <OtherComponent />
      <AnotherComponent />
    </section>
  </Suspense>
  )
}
export default class App extends React.Component{
  state={
    showLazy:false
  }
  render(){
    return (
      <div>
        {this.state.showLazy?<LazyComp />:null}
        <img alt="" onClick={()=>{this.setState({showLazy:true})}} src={logo} />
      </div>
    );
  }
}

发表于 | 分类于

call

1
2
3
4
5
6
7
8
9
10
Function.prototype.call = function (context, ...args) {
    if (typeof this !== 'function') {
        throw new TypeError('not a callable')
    }
    const { fn } = context;
    context.fn = this;
    const result = context.fn(...args)
    context.fn = fn;
    return result;
}

apply

1
2
3
4
5
6
7
8
9
10
Function.prototype.apply = function (context, args) {
    if (typeof this !== 'function') {
        throw new TypeError('not a callable')
    }
    const { fn } = context;
    context.fn = this;
    const result = context.fn(...args)
    context.fn = fn;
    return result;
}

bind

  • bind时可以绑定部分参数，执行函数会将新参数和之前的部分参数一块传入并执行
  • 绑定函数也可以使用new运算符构造，提供的this值会被忽略，但前置参数仍会提供给模拟函数
  • bind多次this仍然指向第一次的指向
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Function.prototype.bind = function (otherThis, ...args) {
    if (typeof this !== 'function') {
        throw new TypeError('no a callable object');
    }

    var fNOP = function () { };
    var func = this;
    var fBound = function (...myargs) {
        var fromNew = fNOP.prototype.isPrototypeOf(this);
        return func.apply(fromNew ? this : otherThis, args.concat(myargs));
    }
    if (this.prototype) {
        fNOP.prototype = this.prototype;
    }
    fBound.prototype = new fNOP;
    return fBound;
}

发表于 | 分类于

扁平化一个数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// [1, 2, 3, 4, [5, 6, [7, 8], 9], 10]
// [1,2,3,4,5,6,7,8,9,10]
function flatter(arr){
    var res = [];
    traversalAll(arr,res);
    return res;
}

function traversalAll(arr,res){
    if(!arr){
        return;
    }
    if(Array.isArray(arr)){
        for(let k=0;k <arr.length;k++){
            traversalAll(arr[k],res);
        }
    } else {
        res.push(arr);
    }
}

发表于 | 分类于

new一个函数构造器主要步骤

1
2
3
4
5
function instant(fn,...args){
    var obj = Object.create(fn.prototype);
    var val = fn.apply(obj,args);
    return typeof obj === 'object' ? val : obj;
}