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()
- controller === object
- 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 - 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 的作用
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
