面向对象

this是谁?

new到底做了什么?

在 ES5 中如何用函数模拟一个类？

本质为原型链继承
human.proto === Human.prototype
function Human(options){
this.name = options.name;
this.city = options.city
}
Human.prototype.species= function(){};
Human.prototype. walk=function(){} ;
Human.prototype.useTools= function(){};

var human = new Humen()

关于this

模板代码

window.Controller = function(options){
  var init = options.init // B

  let object = {
    view: null,
    model: null,
    init: function(view, model){ // A      
      this.view = view
      this.model = model
      this.model.init()
      init.call(this, view, model) // 这里的init 是 B传入对象 的 init     this是object
      this.bindEvents.call(this)
    },
  }
//把传入对象不在模板内的方法和属性写入到返回的object对象上
  for(let key in options){
    if(key !== 'init'){
      object[key] = options[key]
    }
  }
  return object   //  1  controller === object
}

实例代码

!function(){
  var model = Model({resourceName:'Message'})
  var view = View('section.message')
  var controller = Controller({   //返回的是一个object对象
      //  2  controller === object
init:function(vie,model){
//此时这下面的this已经被模板定死,即为object
      this.messageList = view.querySelector('#messageList')
      this.form = view.querySelector('form')
      this.loadMessages()
    },
//object 上有下面三个属性吗 ?    没有,所以需要在模板添加功能,使返回的object具有这三个属性.
form: (){},
loadMesssges:(){},
messageLists: (){}
  })  
  controller.init(view, model)  
//controller.init.call(controller,view,model)  
//controller.init.call(object,view,model)  
}.call()

1. controller === object
2. controller.init(view, model)
   controller.init.call(controller, view, model)
   那么 controller.init 里面的 this 当然 TM 是 controller
   也就是这个1里面的object
   controller.init 里面的 this 就是 object
   object.init 里面的 this 就是 object
3. initB.call(this)
   initB 里面的 this === call 后面的this
   call 后面 this === 第二条里的 this
   第二条里面的 this === object
   => initB 里面的 this 就是 object

三个小this题目

button.onclick = function f1(){
    console.log(this) // 触发事件的元素。  button
}

button.onclick.call({name: 'frank'})

button.addEventListener('click', function(){
    console.log(this) // 该元素的引用 button
}
2 结果

$('ul').on('click', 'li' /*selector*/, function(){
    console.log(this) //this 则代表了与 selector 相匹配的元素。
    // li 元素
})
3 结果
去看 on 的源码呀 -> 做不到
jQuery 的开发者知道 onclick 的源码，f1.call(???)
jQuery 的开发者写了文档
看文档呀

function X(){
    return object = {
        name: 'object',
        options: null,
        f1(x){
            this.options = x
            this.f2()
        },
        f2(){  this.options.f2.call(this)}
}
var options = {
    name: 'options',
    f1(){},
    f2(){ console.log(this) // this 是啥  }
}
var x = X()
x.f1(options)

new 的作用

JS的new到底做了什么?

new 的作用

var object = new Object()
自有属性 空
object.proto=== Object.prototype

var array = new Array('a','b','c')

自有属性 0:'a' 1:'b' 2:'c',length:3
array.proto === Array.prototype
Array.prototype.proto === Object.prototype

var fn = new Function('x', 'y', 'return x+y')
自有属性 length:2, 不可见的函数体: 'return x+y'
fn.proto === Function.prototype

Array is a function
Array = function(){...}
Array.proto=== Function.prototype