this
this的指向在函数定义时确定不了
函数执行时才能确定this的指向，指向最终 调用它的对象
function a(){
var user="追孟子";
console.log(this.user); // undefined
console.log(this) // this指向window
}
a(); // 相当于window.a()
var o = {
user : "追孟子",
fn : function(){
console.log(this.user); // 追孟子
}
}
o.fn(); // this指向o,函数被上一级调用,this的指向就是上一级
window.o.fn(); // 指向window.o对象
var o={
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); // 12，如果b对象中的a:12注释掉，则，输出的是undefined
}
}
}
o.b.fn() // 函数中包含多个对象，尽管这个函数是被最外层对象调用，this的指向也只是他上一级的对象
var j = o.b.fn;
j(); // this指向的是window，this.a为undefined。fn赋值给变量j并没执行，最终指向的是window
箭头函数
更短的函数，相当于匿名函数，简化了函数的定义
不绑定this，this为作用域，有上下文决定
普通函数的this指向调用它的那个对象
call,apply,bind不会改变this的指向
var obj = {
birth:1990,
getAge:function(){
var b = this.birth; // 1990,this指向obj
var fn = function(){
return new Date().getFullYear() - this.birth; // undefined,this指向window
};
return fn();
}
}
var obj = {
birth:1990,
getAge:function(){
var that = this;
var b = this.birth; // 1990,this指向obj
var fn = function(){
return new Date().getFullYear() - that.birth; // this指向obj
};
return fn();
}
}
var obj = {
birth:1990,
getAge:function(){
var b = this.birth; // 1990
var fn = ()=> new Date().getFullYear() - this.birth; // this指向obj对象
};
return fn();
}
}
/*
箭头函数
不能用new和argument,没有prototype属性
*/
var Person = (name,age) => {
this.name = name;
this.age = age;
}
var p = new Person('John',33) // error
var func = () => {
console.log(arguments)
}
func(55) // error
var Foo = () => {}
console.log(Foo.prototype) // undefined
bind
fun.bind(thisArg[,arg1[,arg2[,...]]])
thisArg：当绑定函数被调用时，该参数会作为原函数运行时的this指向；
new操作符调用绑定函数时该参数无效
arg1[,arg2[,...]]:当绑定函数被调用时，该参数将置于实参之前传递给被绑定的方法
返回值：返回指定的this值和初始化参数改造的原函数拷贝
//创建绑定函数
this.x = 9;
var module = {
x: 81,
getX: function() { return this.x; }
};
module.getX(); // 返回 81
var retrieveX = module.getX;
retrieveX(); // 返回 9, "this"指向全局作用域
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81
apply(),call()
在特定的作用域中调用函数（等于设置函数体内this对象的值，以扩充函数赖以运行的作用域）
会改变this的指向
若apply和call的第一个参数为null时，this指向window对象
//基本用法
function add(a,b){
return a+b
}
function sub(a,b){
return a-b
}
var a1 = add.apply(sub,[4,2]) //6,sub调用add方法
var a2 = sub.apply(add,[4,2]) //2,add调用sub方法
var a3 = add.call(sub,4,2) //6,sub调用add方法
function Product(name, price) {
this.name = name;
this.price = price;
if (price < 0) {
throw RangeError( 'Cannot create product ' + this.name + ' with a negative price' );
}
}
function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}
//等同于
function Food(name, price) {
this.name = name;
this.price = price;
if (price < 0) {
throw RangeError( 'Cannot create product ' + this.name + ' with a negative price' );
}
this.category = 'food';
}
//function Toy 同上
function Toy(name, price) {
Product.call(this, name, price);
this.category = 'toy';
}
var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);
