一、js中的四种调用模式s
- 构造函数调用：new Foo();
- 对象方法调用：o.method();
- 函数直接调用：foo();
- call/apply/bind：func.call(o);
二、构造函数调用模式
// this指向构造函数创建的新对象
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
console.log(this.name);
}
}
var tom = new Person('tom', 23);
console.log(tom); // {name:"tom",age:23,sayName:ƒ()}
三、对象方法调用
// 作为某个对象的方法被调用时，this指向其上级对象
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
console.log(this.name);
}
}
var tom = new Person('tom', 23);
tom.sayName(); // tom
四、函数直接调用
// 在函数内部创建的函数，在这个函数调用时，函数内部的this会指向window而不是外部的函数
function add(a, b) {
return a + b;
}
var myNumber = {
value: 1,
double: function() {
function handle() {
this.value = add(this.value, this.value);
}
handle();
}
};
console.log(myNumber.value); // 1
myNumber.double();
console.log(myNumber.value); // 1
function add(a, b) {
return a + b;
}
var myNumber = {
value: 1,
double: function() {
function handle() {
this.value = add(this.value, this.value);
}
handle();
},
// 改进方法一
double2: function() {
this.value = add(this.value, this.value);
},
// 改进方法二
double3: function() {
var _this = this;
function handle() {
_this.value = add(_this.value, _this.value);
}
handle();
}
};
console.log(myNumber.value); // 1
myNumber.double();
console.log(myNumber.value); // 2
五、call/apply/bind方法
// call/apply/bind作用就是借用别人的方法来调用,就像调用自己的方法一样
// call/apply/bind都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,
// 也就是每个方法都有call, apply,bind属性,既然作为方法的属性,那它们的使用就当然是针对方法的了
// apply方法
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.move = function(stepX, stepY) {
this.x += stepX;
this.y += stepY;
};
var p = new Point(0, 0);
console.log(p); // Point {x: 0, y: 0}
p.move(2, 2);
console.log(p); // Point {x: 2, y: 2}
// 移动圆心，使用apply来借用move方法
// p.move是一个函数，作用是将一个点移动，通过apply方法把它借用给circle对象，
// 将circle对象上的x/y属性进行变更，分别加2和1，实现了圆心的移动，在这里apply方法描述的就是一个借用的功能；
var circle = {
x: 1,
y: 1,
r: 1
};
p.move.apply(circle, [2, 1]);
console.log(circle); // {x: 3, y: 2, r: 1}
// call方法
// apply与call的功能并没有实质性的区别，只是在传入参数的时候，apply需要将参数以数组的形式进行传递，而call是将需要传入的参数一个一个跟在借用的对象后；
function add(x, y) {
return x + y;
}
function call1(num1, num2) {
return add.call(this, num1, num2);
}
function apply1(num1, num2) {
// return sum.apply(this, [num1, num2]);
return add.apply(this, arguments);
}
console.log(call1(10, 20)); // 30
console.log(apply1(5, 10)); // 15
// bind方法
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.move = function(stepX, stepY) {
this.x += stepX;
this.y += stepY;
};
var p = new Point(0, 0);
var circle = {
x: 1,
y: 1,
r: 1
};
// 使用bind时，会将绑定this后的函数引用返回，然后手动执行
var circleMove = p.move.bind(circle, 2, 2);
circleMove();
console.log(circle); // {x: 3, y: 3, r: 1}
// 绑定时传入参数后，手动设置偏移量将不再起作用，即每次只能移动固定值
circleMove(3, 4);
console.log(circle); // {x: 5, y: 5, r: 1}
// bind实现每次自定义偏移量
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.move = function(stepX, stepY) {
this.x += stepX;
this.y += stepY;
};
var p = new Point(0, 0);
var circle = {
x: 1,
y: 1,
r: 1
};
// 实现每次自定义偏移量
var circleMove = p.move.bind(circle);
circleMove(3, 4);
console.log(circle); // {x: 4, y: 5, r: 1}
// call/apply/bind： 扩充作用域
// 最大好处是对象不需要与方法有任何耦合关系
var color = 'red';
var obj = {color:'blue'};
var obj1 = {color:'black'};
var obj2 = {color:'yellow'};
function showColor(){
console.log(this.color);
}
showColor(); // red;
showColor.apply(obj); // blue
showColor.call(obj1); // black
showColor.bind(obj2)(); // yellow