17/6/18随笔

Posted 2020-09-23 MesopotamiazZ

一、今天继续了解Vue.js模板语法、计算属性、列表渲染、表单空间绑定等一些基础功能。Vue有些反面用起来很爽，比如this肯定是Vue的实例，不用再想JS活着Jquery去考虑上下文环境，默认绑定this、隐式绑定this、显式绑定this或者new绑定。还有v-model双向绑定表单、组件Component的的一些用法。同时也感觉很迷茫，毕竟没有实际用过Vue.js开发过，不知道知识点孰轻孰重，纯粹是在按葫芦画瓢，思绪混乱。

二、今天学习了一种原型机成的方法：

function Foo(){
  this.color = [‘red‘,‘blue‘,‘green‘];
}

function Boo(){
  this.color = [];
}

Boo.prototype = new Foo();//把Foo的实例赋值给Boo的原型对象，也就是说Foo的实例对象就是Boo的原型对象，同时Boo继承了Foo的属性以及方法
var b = new Boo();
var b1 = new Boo();
b.__proto__.color.push(‘yellow‘);
console.log(b1.color.toString());//red,blue,green,yellow

三、复习你不知道的javascript关于this的绑定问题：

在理解this的绑定过程之前，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）。最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。

function baz(){
  //当前调用栈是baz，因此当前调用位置是全局作用域
  console.log("baz");
  bar();//bar的调用位置
}

function bar(){
  //当前调用栈是baz  -->  bar，因此当前调用位置是在baz中
  console.log("bar");
  foo();//foo的调用位置
}

function foo(){
  //当前调用栈是baz  -->  bar  -->  foo,因此当前调用位置在bar
  console.log("foo");
}

baz();//baz的调用位置

1、默认绑定

function foo(){
  console.log(this.a);//应用了this的默认绑定，因此this指向全局变量
}
var a = 2;
foo();//2,foo调用位置

2、隐式绑定

function foo(){
  console.log(this.a);
}

var obj = {
  a:2,
  foo:foo
};

obj.foo();//2

//--------------------------------
function foo(){
  console.log(this.a);
}

var obj2 = {
  a:42,
  foo:foo
};

var obj1 = {
  a:2,
  obj2:obj2
};
obj1.obj2.foo();//42,对象属性引用链中只有上一层或者最后一层在调用位置中起作用

隐式丢失：

function foo(){
  console.log(this.a);  
}

var obj = {
  a:2,
  foo:foo
};

var baz = obj.foo;//函数别名，会造成隐式绑定丢失，从而应用默认绑定
var a = 1;
baz();//1

//----------------------------------------------------------------------
function foo(){
  console.log(this.a);
}

function doFoo(fn){
  fn();
}

var obj = {
  a:2,
  foo:foo
};
var a = 1;
doFoo(obj.foo);//1

3、显示绑定

function foo(){
  console.log(this.a);
}

var obj = {
  a:2
};

foo.call(obj);//2,通过apply和call方法将foo绑定到obj中，强制把foo的this绑定到obj上

硬绑定和ES5总的bind绑定(后面添加)

4、new绑定

function Foo(a){
  this.a = a;
}

var f = new Foo(2);
console.log(this.a);

优先级：

a.函数是否调用new 绑定，如果是的话this绑定为新创建的对象；

b.函数是否通过apply、call、或者硬绑定调用，如果是this绑定之sing对象；

c.函数是否在上下文环境调用，如果是this绑定上下文对象；

d.如果都不是就是默认绑定；