书写instanceof

73 阅读3分钟

function Persion(){
  this.name = "freemen"
}


const obj = new Persion


// console.log(obj instanceof Persion)


// instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
function instance_of(Obj, Constructor){
  let implicitPrototype = Obj.__proto__;  // 获取实例对象的隐式原型
  let displayPrototype = Constructor.prototype; // 获取构造函数的prototype 属性
  // while 循环 -> 在原型链上不断向上查找
  while(true){
      // 直到 implicitPrototype = null 都没找到, 返回false
      if(implicitPrototype === null){
        return false
        // 构造函数的 prototype 属性出现在实例对象的原型链上 返回 true
      }else if (implicitPrototype === displayPrototype){
        return true
      }
      // 在原型链上不断查找 构造函数的显式原型
      implicitPrototype = implicitPrototype.__proto__
  }
}


const has = instance_of(obj,Persion)


console.log(`has`, has)

遍历json的所有的节点的值|渲染Antd当中的树组件

const json={
  a:{b:{c:1}},
  d:[1,2],
};
const dfs=(n)=>{
  console.log(n);
  Object.keys(n).forEach(k=>{
    dfs(n[k],path.concat(k));
  });
};
dfs(json);

渲染Antd当中的树组件

class Demo extends React.Compoent{
  dfs=(n)=>{
    return(
      <TreeNode title={n.title} key={n.key}>
        n.children.map(this.dfs);
      </TreeNode>
    );
  }
}

如何做code review要考虑哪些内容?

代码规范(eslint不能全检查,如变量命名,代码语义)

重复代码要抽离和复用

单个函数内容过长,需要拆分

算法复杂度是否可用?是否可以继续优化

是否安全漏洞?

扩展性如何?不用为了扩展而扩展不封闭即可的)

是否和现有的功能重复了?

是否有完全的单元测试?

组件设计是否合理?

code review的时机?

提交PR或者MR的时候通过代码diff进行Code review

每周例行一次集体的code review

持续优化?

每一次的codereview的问题要记录下,

归纳整理形成自己的代码规范体系,

新加入的成员要提前学习,提前规避

箭头函数和普通函数的区别

1箭头函数的this指向父级作用域的this 2.call(apply()/bind()无法改变箭头函数中this的指向 箭头函数和普通话函数的区别 3.不可以被当作构造函数 4.不可以使用arguments对象 5.箭头函数不支持new.target

import { isSSRSafeAttrName } from "@vue/shared";


const obj ={
    fullName:"freemen",
    sayName(){
        console.log(`this.fullName`,this.fullName)
    }
};
obj.sayName()//freemen
//箭头函数的this指向父级作用域的this
const obj ={
    fullName:"freemen",
    sayName:()=>{
        console.log(`this.fullName`,this.fullName)
    }
};
obj.sayName()//undefined指向全局的fullname
function sayName(){
    console.log(`this.fullName`,this.fullName)
}
const sayName=()=>{
    console.log(`this.fullName`,this.fullName)
}//undefined
const obj={
    fullName:"freemen";
}///fremen
sayName.call(obj)
function Person(){
    this.fullName="freemen"
}


const obj=new Person;
console.log(obj);//frremne
const Person=()=>{
    this.fullName="freemen"
}
const obj=new Person;
console.log(obj);//Error,person is not constructor
function sayName(){
    const args=arguments;
    console.log(args)
}
sayName('a','b')//a,b
const sayName=()=>{
    const args=arguments;
    console.log(args);
}
sayName('a','b');///arguments is not undefined


const sayName=(...args)=>{
    console.log(args);
}
sayName('a','b');//a,b
function Person(){
    this.name="freemen";
    const target=new.target;
    console.log(target);
}
const obj=new Person;
console.log(obj);//newtarget指向了构造函数
const Person=()=>{
    this.name="freemen";
    const target=new.target;
    console.log(target);
}
const obj=new Person;
console.log(obj);
//new .target expression is not allowed here

import { isSSRSafeAttrName } from "@vue/shared";


const obj ={
    fullName:"freemen",
    sayName(){
        console.log(`this.fullName`,this.fullName)
    }
};
obj.sayName()//freemen
//箭头函数的this指向父级作用域的this
const obj ={
    fullName:"freemen",
    sayName:()=>{
        console.log(`this.fullName`,this.fullName)
    }
};
obj.sayName()//undefined指向全局的fullname
function sayName(){
    console.log(`this.fullName`,this.fullName)
}
const sayName=()=>{
    console.log(`this.fullName`,this.fullName)
}//undefined
const obj={
    fullName:"freemen";
}///fremen
sayName.call(obj)
function Person(){
    this.fullName="freemen"
}


const obj=new Person;
console.log(obj);//frremne
const Person=()=>{
    this.fullName="freemen"
}
const obj=new Person;
console.log(obj);//Error,person is not constructor
function sayName(){
    const args=arguments;
    console.log(args)
}
sayName('a','b')//a,b
const sayName=()=>{
    const args=arguments;
    console.log(args);
}
sayName('a','b');///arguments is not undefined


const sayName=(...args)=>{
    console.log(args);
}
sayName('a','b');//a,b
function Person(){
    this.name="freemen";
    const target=new.target;
    console.log(target);
}
const obj=new Person;
console.log(obj);//newtarget指向了构造函数
const Person=()=>{
    this.name="freemen";
    const target=new.target;
    console.log(target);
}
const obj=new Person;
console.log(obj);
//new .target expression is not allowed here