SOURCE

console.log(+false)
console.log(+'2')
console.log(1+2+'1')
console.log('2'+2+2+1)


let x = 3;
let foo = {
  x: 2,
  baz: {
    x: 1,
    bar: function() {
      return this.x;
    }
  }
}
let go = foo.baz.bar;

console.log(go());  // 3
//this由调用者提供，由调用函数的方式来决定。
//如果是一个对象调用的函数，则this指向该对象，比如foo.baz.bar()。
//如果函数独立调用比如go()，那么该函数内部的this，则指向undefined。
//但是在非严格模式中，它会被自动指向全局对象window。
console.log(foo.baz.bar()); // 1


let name = 'cdd';
let fn = {
  name: 'd',
  say: () => {
      return this.name
  }
}
console.log('s',fn.say())

let box = document.getElementById('box')
box.onclick = function() {
    setInterval(() => {
        this.style.backgroundColor = 
        `rgb(${parseInt( Math.random()*255)},${parseInt(
        Math.random()*255)}, ${parseInt(Math.random()*255)})`
    }, 1000)
}

<div class="wrap">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="middle">中间</div>
</div>

<div id='box'>点击我1秒后变色</dvi>

.wrap {
    background: #eee; 
    overflow: hidden; 
}  
.left {
    width: 100px;
    height: 100px; 
    float: left; 
    background: coral;
}
.right {
    width: 100px; 
    height: 200px; 
    float: right; 
    background: lightblue;
}
.middle {
    margin-left: 100px; 
    background: lightpink;
    margin-right: 100px;
    min-height: 300px;
}
#box {
    margin: 100px;
    width: 100px;
    height: 100px;
    background: pink;
}