1、函数的call方法
函数的call方法, 可以在触发函数的同时替换其this指向
仿写:
应用场景:
当创建多个类似的构造函数时,会有很多共同的属性,可以提取这些共同的属性,组成一个共享的构造函数
函数.call (新对象,参数1,参数2 …):就会把函数的this替换成新对象,然后触发函数
//函数.call(新对象):就会把函数的this替换成新对象,然后触发函数
//构造函数:创建员工对象
function Employee(name, age, eid) {
this.name = name;
this.age = age;
this.eid = eid;
};
//员工中细分为:教师、管理者...
function Teacher(name, age, eid) {
//一般正常函数调用是:show(a,b,c)
//如果用call来修改this指向,则写法是:
//show.call(新的对象,name,age,eid)
Employee.call(this, name, age, eid);
// this.name=name;
// this.age=age;
// this.eid=eid;
this.category = "教师"; //分类 = 教师
};
var yanan = new Teacher('丫丫', 19, '11011');
console.log(yanan);
//员工 > 管理者
function Manager(name,age,eid){
Employee.call(this,name,age,eid)
this.category="管理者";
}
var m = new Manager("文文",38,"00001");
console.log(m);
2、apply方法
函数的apply:同call,都可以替换函数的this指向,同时执行函数
同一个函数:show(a,b,c),新对象obj
用call书写:show.call(obj,a,b,c)
用apply书写:show.apply(obj,[a,b,c])
特点:apply(对象,[参数数组...])
apply ( 对象,[参数数组...] )
//函数的apply:同call,都可以替换函数的this指向,同时执行函数
//同一个函数:show(a,b,c),新对象obj
//用call书写:show.call(obj,a,b,c)
//用apply书写:show.apply(obj,[a,b,c])
//特点:apply(对象,[参数数组...])
let obj = {name:"丫丫"};
function show(a,b,c){
console.log(this.name,a,b,c);
};
show.call(obj,1,2,3);
show.apply(obj,[1,2,3]);
用途:
可以把数组类型,转化成普通的函数结构
数组最大值:var a = Math.max.apply(null, nums)
合并数组:arr1.push.apply(arr1,arr2)
var nums = [5, 6, 7, 8, 9];
//数组最大值:
var a = Math.max.apply(null, nums);
console.log(a);
//合并数组:
var arr1 = [1,2,3,4];
var arr2 = [5,6,7,8,9];
var arr = arr1.concat(arr2);
// console.log(arr);
//apply:参数arr1必须要写,代表执行apply的对象
arr1.push.apply(arr1,arr2);
arr1.push(...arr2);//ES6的写法
console.log(arr1);
3、bind方法
为函数绑定this,返回绑定了this的新函数,但是不立即执行
bind不会修改原函数,而是克隆一个新的出来,把this换了
通过bind创建的函数,带有boundThis属性,调用时,就把这个属性作为自己的this
var name ="全局";
var yanan = {
name: "丫丫"
};
function show() {
console.log(this.name);
};
//show1是bind返回的新函数,利用window方式查看,可以发现这个函数带有一个boundThis属性,其中就保存了yanan对象
//正常函数:本身不保存this指向,会根据其运行所在的对象作为他的this
//通过bind创建的函数,带有boundThis属性,则调用时,就把这个属性作为自己的this
var show1 = show.bind(yanan);
show1(); //丫丫
show(); //全局
用途:
function Demo(count) {
this.count = count;
};
Demo.prototype.countdown = function () {
//不要用默认的箭头函数,此函数就是为了解决普通函数的bug而生
//利用bind方式,把当前对象绑定给回调函数
var callback = function () {
console.log(this.count--);
};
//cb变量存储了绑定了this变量的函数
var cb = callback.bind(this);
setInterval(cb, 1000);
}
var d = new Demo(1000);
d.countdown();
4、箭头函数的this
普通函数: this指向运行时所在的对象
箭头函数: 自身没有this, 使用声明时 所在的上级作用域的this
区别:
普通函数的this会在使用时变化
箭头函数的this在声明时固定, 使用时不会变化
优点:箭头函数执行时,固定为声明时作用域中的this,不会变
call、apply、bind 不能改变箭头函数的this,因为箭头函数本身没有this
箭头函数没有this、callee、arguments,这些都在ES新标准中被更好的方案替代了