【笔记】- JavaScript基础

// 这是一个隐式不存在的变量
executionContext = { 
  scopeChain: {}, // 创建作⽤域链（scope chain） 
  variableObject: {}, // 初始化变量、函数、形参 
  this: {} // 指定this 
}

// ⼀段这样的代码 
function demo(num) { 
  var name = 'kuimo'; 
  var getData = function getData() {}; 
  function c() {} 
}
demo(100);

// 创建阶段⼤致这样，被调用但没执行，所以num这个参数存在，在这个阶段就出现了【变量提升(Hoisting)】 
executionContext = { 
  scopeChain: { ... }, 
  variableObject: {
    arguments: { // 创建了参数对象 
      0: 100, length: 1 
    },
    num: 100, // 创建形参名称，赋值/或创建引⽤拷⻉ 
    c: pointer to function c() // 有内部函数声明的话，创建引⽤指向函数体 
    name: undefined, // 有内部声明变量a，初始化为undefined 
    getData: undefined // 有内部声明变量b，初始化为undefined 
  },
  this: { ... } 
}
  
// 代码执⾏阶段，在这个阶段主要是赋值并执⾏代码 
executionContext = { 
  scopeChain: { ... }, 
  variableObject: { 
    arguments: { 0: 100, length: 1 },
    num: 100, 
    c: pointer to function c(),
    name: 'kuimo', // 分配变量，赋值 
    getData: pointer to function getData() // 分配函数的引⽤，赋值 
  },
  this: { ... } 
}

var myname = 'window'
function a () { 
  var myname = 'a'
  return function b() { 
    var myname = 'b'; // 如果同时去掉这句和上面两句myname的赋值，下面的log就会报错
    console.log(myname); // b 
  } 
}
var b = a(); 
function c() { 
  var myname = 'c'; // 这个myname属于func c的函数作用域
  b(); // b在这里是一个已经被定义好的函数，他的作用域属于a，所以作用域链如果在b、a和window都找不到myname的定义那么就会报错
}
c(); 

function outer() { 
  var top = xxxx; 
  function inner() {
    // inner可以读到outer的变量
    xxx.innerHTML = top; 
  } 
}

function createIncrement() {
  let count = 0;
  function increment() { 
    count++;
  }

  let message = `Count is ${count}`;
  function log() {
    console.log(message);
    console.log(count);
  }
  
  return [increment, log];
}

const [increment, log] = createIncrement();
increment(); 
increment(); 
increment(); 
log(); // What is logged?

// This 相关
// 1.
function show () { 
  console.log('this:', this); // 此时show虽然在obj下被调用，但是真的被调用的时候
}
var obj = {
  show: function () { 
    show(); 
  } 
};
obj.show();

// 2.
var obj = { 
  show: function () { 
    console.log('this:', this); // 此时的this就是这个function new出来的实例
  } 
};
var newobj = new obj.show();
// 效果等同于 var newobj = new (obj.show)();

// 3.
var obj1 = { name: 'obj1' }
var obj2 = { 
  name: 'obj2',
  show: function () { 
    console.log('this:', this); 
  } 
};
var newobj = new (obj2.show.bind(obj1))(); // 输出 show {}, 无论怎么bind，new的时候的this还是指向本体实例
obj2.show.bind(obj1)(); // 输出obj1

// 4.
var obj = { 
  show: function () { 
    console.log('this:', this); 
  } 
};
var elem = document.getElementById('book-search-results'); 
elem.addEventListener('click', obj.show); // 绑定事件的元素，也就是elem
elem.addEventListener('click', obj.show.bind(obj)); // obj
elem.addEventListener('click', function () { 
  obj.show();  // obj
});
elem.addEventListener('click', () => obj.show()); // obj

// 5.
const obj = {
  a: 1,
  next: () => {
    console.log(this); // 此时在浏览器输出window，在node输出global {}, 箭头函数的this找的是它上一层的函数，注意是函数， 如果是对象包着它，那么它就会继续向上找函数，直到找到顶层
  }
}
obj.next();

Object.defineProperty(obj, prop, descriptor)

obj: 要在其上定义属性的对象。

prop:  要定义或修改的属性的名称。

descriptor: 将被定义或修改的属性的描述符。

var target = function () { return 'I am the target'; };
var handler = {
  apply: function () {
    return 'I am the proxy';
  }
};

var p = new Proxy(target, handler);

p();
// "I am the proxy"

var array = [5,4,3,2,1];
var handler = {
  set: function (target, prop, value) {
    console.log(`set ${prop} with value ${value}`);
    target[prop] = value;
    return true;
  },
  get: function (target, prop) {
    	// 利用get甚至可以拦截方法的调用
      if (prop === 'push') {
          return (v) => {
              console.log('invoke push');
              return target[prop];
          }
      }
      return target[prop];
  }
};

var proxyArray = new Proxy(array, handler);
// p[1] = 2;

// 7种会改变数组本身的方法，都会被proxy拦截
// 但是并不是单次拦截，比如说sort，它其实本质就是在原数组中移动位置，这个移动可能要多次完成，对proxy来说每次移动都是一次set，所以会触发多次set拦截
// 同时还会拦截到对数组length属性的修改
proxyArray.push(1);
proxyArray.splice(2, 0, 3);
proxyArray.sort();
proxyArray.reverse();
proxyArray.pop();
proxyArray.shift(1);
proxyArray.unshift(6)

console.log(proxyArray);

var a = 1;
function one() {
    var b = 2;
    console.log(a, b);
}
one();

var a = 1;
function one() {
    var b = 2;
+   return function two() {
+       console.log(a, b);
+   }
}
+let two = one();
+two();