20190603
1、Array.prototype.slice.call(arguments, 0)用来将arguments变量转换为真正的数组。
2、依赖注入：https://yanhaijing.com/javascript/2014/01/24/dependency-injection-in-javascript/
通俗理解：https://zhuanlan.zhihu.com/p/26176550
codewars：https://imweb.io/topic/5618a9d05d6f37745e8f498a
我的理解：fun需要用到A,B,C的方法，传统做法是在fun中新建ABC，然后调用。依赖注入是由一个单例模式的对象injector存储所有依赖项ABC…，通过register方法为它注册对象，然后将fun传入通过resolve方法从injector中提取出fun所需要的依赖（正则匹配fun.toString()里的参数 - 参数里包含依赖A\B\C），并执行fun.apply(scope, params)。
3、node与require：https://www.cnblogs.com/blog-cxj2017522/p/7071840.html
4、阿里面试题：https://github.com/Aaaaaaaty/blog/issues/10
“函数与构造函数的区别”
最大的区别就是在普通函数调用时其内部this指向了全局对象。如果是浏览器中运行那么这个对象就是window。如果用作构造器调用，如 var a = new A()，此时A中的this会指向通过new调用出来的实例化对象。
function A(name, id) {
this.name = name
this.id = id
}
function B(name, id) {
this.name = name
this.id = id
}
var a = new A(1,2)
var b = B(1,2)
console.log(a) // {id: 2,name: 1}, this === a
console.log(b) // undefined
console.log(window.name) // '1'
console.log(window.id) // 2
this的指向可分为：
作为对象的方法调用
作为普通函数调用
构造器调用
call&apply&bind调用
20190604
1、redux待看：https://juejin.im/post/5a37075051882527a13d9418
2、开始学习React官网（中文）。
核心概念
JSX —— 是JS的语法拓展（JS X～），JSX可以很好的描述UI应该呈现出它应有交互的本质形式。
JSX可能会使人联想到模版语言，但它具有JS的全部功能。
JSX可以生成React“元素”（ReactElement 结合之前的英文文档）
组件 —— 函数组件（最简单的）与class组件
函数组件
function Welcome(props){
return <h1>Hello, {props.name}</h1>
}
纯函数 —— 不会尝试更改入参（不能修改props）
⚠️？？？
不要:
// wrong
this.setState({
counter: this.state.counter + this.props.increment
})
解决(也可以写成箭头函数)：
// Correct
this.setState(function(state, props){
return {
counter: state.counter + props.increment
}
})
单项数据流（数据是向下流动的）：
子组件在props中接受参数，不会知道是来自state/props/手动输入的，这通常被叫做“自上而下”或者“单向”的数据流。
如果你把一个以组件构成的树想像成一个props的数据瀑布的话，那么每一个组件的state就像是在任意一点上给瀑布增加额外的水源，但是它只能向下流动。
⚠️？？？
bind
// 为了在回调中使用 this，这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
受控组件 —— 表单元素的value受state控制（时时改变）
handleChange(event){
this.setState({value: event.target.value});
}
<input type="text" value={this.state.value} onChange={this.handleChange} />
非受控组件，如file.
状态提升（两个子组件需要共享数据/同步数据）
将状态提升到父组件，并且将状态改变的方法也提到父组件。
组合：{props.childen} 新颖，在项目中没有遇到。
高级指引
20190605
*、input/textarea/ div contenteditable='true’的控件去掉边框：
border: 0;
outline: none; /* 去掉点击蓝色边框高亮 */
20190606
*、CSS透视效果学习（没看懂）
https://segmentfault.com/a/1190000003843764
*
完成pro-tree瀑布流
2019-06-10
procession的可视化tree
pro-tree完成树到grid树的可视化
⚠️github上的日历项目：https://fullcalendar.io/#demos
1、grid布局：https://www.zhangxinxu.com/wordpress/2018/11/display-grid-css-css3/
2、date格式化：https://www.cnblogs.com/sexintercourse/p/6490921.html
3、图形镂空效果 / 饼图绘制：https://www.zhangxinxu.com/wordpress/2019/06/cssconf-css-idea/
4、火焰效果?：https://codepen.io/Chokcoco/pen/aMRPjR
2019-06-14
！！讨论：
Component和PureComponent的区别
PureComponent自带通过props和state的浅对比来实现 shouldComponentUpate()，而Component没有。
2019-06-20
1、let 是对“创建”变量提升，不对初始化变量提升（设置为undefined为初始化过程）
let a = 1;
{
console.log(a);
let a = 3;
}
2、static为类的方法，子没有该方法
class A{
static s(){console.log("s");}
n(){console.log("n");}
}
var a = new A();
a.s(); // s
a.n(); // Uncaught TypeError: a.s is not a function at <anonymous>:1:3
3、“use strict” 对于没有声明就引用的方法会报错，而不是直接归为window的属性
"use strict"
a = "aaaaa"
console.log(a);
4、数组去重（Set方法、filter方法）
const a = [1,1,3,7,8,4,6,6,8,7,3,3,5,6,4,4,6,8,3];
a.filter((item,index) => a.indexOf(item) === index);
⚠️利用方法是indexOf会返回数组中第一次出现该item的index
5、基础⚠️⚠️
function a(){}
var b = new a();
b.__proto__ === a.prototype
来理解这一段：a是一个普通函数，在创建时会在内存创建一个对象obja，a有个prototype属性指向obja，obja有个constructor属性指向a，obja称为a的原型对象。
现在来看红宝书上这段话：
简单回顾一下构造函数、原型和实例的关系：
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。
那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？。。。。构成了实例与原型的链条，这就是所谓原型链的基本概念。
20190626
1、浏览器重绘/回流：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24
现代浏览器大多通过队列机制来批量更新布局，浏览器会把修改操作放到队列中，至少一个浏览器刷新周期（即16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能有影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流与重绘来确保返回正确的值。
主要包括以下属性/方法：
offsetTop / offsetLeft / offsetWidth / offsetHeight /
scrollTop / scrollLeft / scrollWidth / scrollHeight /
clientTop / clientLeft / clientWidth / clientHeight /
width / height /
getComputedStyle()
getBoundingClientRect()
20190627
0、关注 / 热门这类tab切换（tab也会动）的下划线滑动效果，就是要滑动/选择的元素设置成有下划线，然后它在滑动的时候就好像线在动一样。
1、箭头函数没有自己的this，继承外层上下文绑定的this。
let obj = {
age: 20,
info: function() {
return () => {
console.log(this.age); //this继承的是外层上下文绑定的this
}
}
}
let person = {age: 28};
let info = obj.info();
info(); //20
let info2 = obj.info.call(person);
info2(); //28
2、代理模式：https://segmentfault.com/a/1190000019574843
图片预加载时使用虚拟代理
3、⚠️原型链继承 a.prototype = new A() 这种方法重写了函数a的原型对象，所以之前a.prototype上的方法就被重写了/没有了。
另外测试一下是谁拥有A1/a1属性，注意：实例属性、原型方法的归属区别。
测试：
function A(){
this.A1 = 1;
}
function a(){
this.a1 = 2
}
a.prototype.printa = function(){
console.log(this.a1);
}
a.prototype = new A();
var son = new a();
son.printa();
// A1 / a1
//a? a.prototype? A? A.prototype
确定原型与实例的关系：A instanceof Object； Object.prototype.isPrototypeOf(A)
原型链继承方法的缺点是：1）如果原型继承的实例属性A1是引用类型，则子类间son共享属性（一个改变A1，其他子类的A1都会改变）；2）？？在创建子类型的实例时，不能向超类型的构造函数中传递参数。
4、借用构造函数继承
function A(name){
this.name=name;
}
function a(name, age){
A.call(this, name);
this.age = age;
}
优点：可以传参，可以不共用属性；缺点：只能继承属性，不能继承方法。
20190628
?JS高级程序设计书籍学习
1、组合继承（伪经典继承）：最常用的继承方式
⚠️注释掉constructor那一句也不会对结果造成影响，跟fe小分队讨论的结果是：a1通过a创建所以一定会走a()，为了继承的规范性，改变constructor指向，constructor的作用是可以通过constructor来做一系列判断… 神奇…
自己写的小例子：
function A(name){
this.name = name;
this.colors = ['1', '2', '3'];
}
A.prototype.getName = function(){
console.log(this.name);
}
A.prototype.getColors = function(){
console.log(this.colors);
}
function a(name, age){
//组合继承point2
A.call(this, name);
this.age = age;
}
// 组合继承point1
a.prototype = new A();
// 没有实质性作用 注释掉 运行结果也是一样的
a.prototype.constructor = a;
a.prototype.getAge = function(){
console.log(this.age);
}
var a1 = new a('Nana', 17);
a1.colors.push('6');
a1.getName();
a1.getAge();
a1.getColors();
console.log('---------------------');
var a2 = new a('Naier', 15);
a2.getName();
a2.getAge();
a2.getColors();
2、函数有name属性，function A(){}，A.name是A，匿名函数没有name属性。
3、⚠️函数提升是对于函数式声明的，函数表达式不会发生函数提升！
b(); // 报错
var b = function(){...}
4、匿名函数使用递归时可以使用arguments.callee();
——————————————————————————————————-
扫一扫
575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
