学习笔记整理(一)

Author Avatar
FanShen 11月 24, 2018

这部分的学习笔记,整理于segmentfault和掘金社区的优质文章

复杂判断写法的改进

origin

const buttonClick = (status) => {
	if (status == 1) {
	sendLog('processing')
	jumpTo('IndexPage')
	} else if (status == 2) {
	sendLog('fail')
	jumpTo('FailPage')
	} else if  (status == 3) {
	sendLog('success')
	jumpTo('SuccessPage')
	}
}

v1

switch(status) {
	case1: 
		sendLog('processing')
		jumpTo('IndexPage')
		break;
	case2: 
		sendLog('fail')
		jumpTo('FailPage')
		break;
	case3: 
		sendLog('success')
		jumpTo('SuccessPage')
		break;
}

v2

const actions = {
  '1': ['processing','IndexPage'],
  '2': ['fail','FailPage'], 
  '3': ['success','SuccessPage']
}

const buttonClick = (status) => {
  let action = action[status],
    logName = action[0],
    pageName = action[1]
  sendLog(logName)
  jumpTo(pageName)
}

v3

const actions = new Map([
  [1, ['processing','IndexPage']],
  [2, ['fail','FailPage']],
  [3, ['success','SuccessPage']]
])

const onButtonClick = (status) => {
  let action = actions.get(status) 
  sendLog(action[0])
  jumpTo(action[1])
}

二元判断

不但需要判断status,而且还需要判断用户的身份

const actions = {
  'guest_1':()=>{...},
  'guest_2':()=>{...},
  //....
}

const onButtonClick = (identity,status) => {
  let action = actions[`${identity}_${status}`]
  action.call(this)
}

原文链接

this的指向问题

普通函数

this的指向无法在函数定义时确定,只有在函数执行时确定this到底指向谁
栗子1:

function a() {
  var name = "fan";
  console.log(this.name); //undefined
  console.log(this); //window
}
a();

1中的this指向window,这里this指向调用它的对象,函数a实际上是被window对象调用
栗子2:

var o = {
  name: "fan",
  fn: function() {
    console.log(this.name) //fan
  }
}
o.fn();

2中this指向fan,同1中一样,this指向调用它的对象,函数fn被o对象调用
栗子3:

var o = {
  name = "fan",
  fn: function() {
    console.log(this.name) //fan
  }
}
window.o.fn();

按照之前的结论,this指向调用它的对象,这里应该指向window => 事实却指向了o

  1. 如果一个函数有this,但没有被上一级的对象调用,this指向window(非严格模式)
  2. 如果一个函数有this,被上一级对象调用,this指向上一级对象
    栗子4(特殊情况)
var o = {
  a: 10,
  b: {
    a:12,
    fn: function() {
      console.log(this.a) //undefined
    }
  }
}
var c = o.b.fn; //这里的fn没有被执行
c();

this指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,4中将fn赋值给变量c时并没有执行

箭头函数

箭头函数无法绑定this关键字,所以会自动向上层作用域寻找this,并使用上一层的this

//普通函数
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }, 1000); //undefined
  }
};
//箭头函数
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000); //42
  }
};

原文链接1
原文链接2