17/6/18随笔

Posted MesopotamiazZ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了17/6/18随笔相关的知识,希望对你有一定的参考价值。

一、今天继续了解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.如果都不是就是默认绑定;

 

以上是关于17/6/18随笔的主要内容,如果未能解决你的问题,请参考以下文章

日常学习随笔-自定义了一个双链表(注释蛮详细的)

MVC+EF 随笔小计——分部视图(Partial View)及Html.Partial和Html.Action差异

Beta冲刺-用心聚落步

Beta冲刺-用心聚落步

Beta冲刺-置顶随笔

代码调试随笔