web前端学习笔记

一、web前端学习路线

html->css->javaScript->jquery->React

html5->css3

html5学习交流平台（里面有很多学习的案例）

http://www.html5tricks.com/

二、html 

简书，作者极客江南   http://www.jianshu.com/users/4312c933b9db/latest_articles

三、CSS

w3c

四、javaScript

廖雪峰官网 http://www.liaoxuefeng.com/

4.1 this 出现的场景分为四类

1. 有对象就指向调用对象（函数有所属对象时，通常通过 . 表达式调用，这时 this 自然指向所属对象）

   var myObject = {value: 100};
   myObject.getValue = function () {
    console.log(this.value); // 输出 100
   
    // 输出 { value: 100, getValue: [Function] }，
    // 其实就是 myObject 对象本身
    console.log(this);
   
    return this.value;
   };
   
   console.log(myObject.getValue()); // => 100

2. 没调用对象就指向全局对象（foo 函数虽然定义在 getValue 的函数体内，但实际上它既不属于 getValue 也不属于 myObject。foo 并没有被绑定在任何对象上，所以当调用时，它的 this 指针指向了全局对象 global。）

   var myObject = {value: 100};
   myObject.getValue = function () {
    var foo = function () {
     console.log(this.value) // => undefined
     console.log(this);// 输出全局对象 global
    };
   
    foo();
   
    return this.value;
   };
   
   console.log(myObject.getValue()); // => 100

3. 用new构造就指向新对象（js 中，我们通过 new 关键词来调用构造函数，此时 this 会绑定在该新对象上。）

   var SomeClass = function(){
    this.value = 100;
   }
   
   var myCreate = new SomeClass();
   
   console.log(myCreate.value); // 输出100

4. 通过 apply 或 call 或 bind 来改变 this 的所指。

   var myObject = {value: 100};
   
   var foo = function(){
    console.log(this);
   };
   
   foo(); // 全局变量 global
   foo.apply(myObject); // { value: 100 }
   foo.call(myObject); // { value: 100 }
   
   var newFoo = foo.bind(myObject);
   newFoo(); // { value: 100 }