Dome
打印对象name值
// 一般方式 var person = { name : "dengge" } function idetify(obj){ return obj.name.toUpperCase(); } console.log(idetify(person)) // 优化方式 var person = { name : "dengge" } //api 框架 function idetify(){ return this.name.toUpperCase(); } console.log(idetify.call(person))复制代码 优化方式: 借用call()方法 修改this的指向
当前this指向被调用的对象 优化方式减少了:参数的传递 更易提供一个库调用
this 四个规则
this默认绑定
非严格模式 window 严格模式 undefined
var id = 10; function fn(){ console.log(this.id); } fn() // 10复制代码 fu() == window.fn() 所以当前this指向Window 所以: id -> window.id = 10
非严格模式 window 严格模式 undefined
隐式绑定
如果一个环境调用 走这个环境的this
var id = 10; var obj = { id : 20, fn : function(){ console.log(this.id) } } obj.fn(); // id = 20 (this指向obj) var fn2 = obj.fn; fn2(); // 10 (this指向window) function callback(fn){ fn() } callback(obj.fn) //10 (callback -> window, this指向window)复制代码 如果一个环境调用 走这个环境的this
明确绑定
- call apply 绑定丢失
function fn() { console.log(this.id); } var obj1 = { id : 30 } var obj2 = { id : 40 } var obj3 = { id : 50 } var obj4 = { id : 60 } fn.call(obj1); // 30 (call使得this指向了obj1) fn.apply(obj2); // 40 (call使得this指向了obj2)复制代码 - 硬绑定(bind)
var fun = fn.bind(obj3); fun.call(obj1); // 50 (bind使得this指向了obj3 不会修改成obj1) fun(); // 50复制代码
new 绑定
// 构造函数function person(){ this.name = "dengge"; return { a : 1 };}var p = new person();console.log(p.name) // "dengge" (new使得this指向了p对象)复制代码 ES6箭头函数this
function foo() { setTimeout(() => { console.log('id:', this.id); }, 100);}var id = 21;foo.call({ id: 42 }); // id: 42 (如果没有setTimeout(fn(),100) this这时指向window 此时this指向了对象{id:42} 箭头函数没有自己的this,内部的this指向外部的this({id:42}))复制代码 箭头函数里的this是定义时所在的作用域, 而不是运行时所在的作用域 箭头函数没有自己的this,内部的this指向外部的this