简单说明 this 4种使用方式:
1、调用者使用:
function t(){
this.num = 10;
}
t();
console.log(num) => 10
console.log(window.num) =>10
这样定义执行 t(),this其实为null,this为null的时候会指向到window对象上
使用 'use strict' 严格模式下,当this 为 null 时 会抛出一个异常!
2、作为构造函数调用:
function User(name,age){
this.name = name;
this.age = age;
return "hello"; // 无效的
}
var user = new User('多多','18');
console.log(user);
console.log(typeof(user)) => object
/*
1、 方法(函数) 被 new 的瞬间,会得到一个空对象 {}
2、方法(函数)的 this 指向该对象
3、运行该方法:
{}.name = name 对象的name 等于传过来的 name
{}.color = color
4、最后返回该对象
5、在构造函数 内部 return 是没用作用的(被忽略)!!!!!
*/
3、函数通过 call()调用:可以动态的更改 this 的指向
可以让当前对象去使用别的对象的方法
需要的参数传递过去!
语法:object1.方法 / 函数.call(object2,'参数1','参数2',........,'参数N')
var btn1 = document.querySelector('#btn1');
var btn2 = document.querySelector('#btn2');
function changeBg(){
this.onclick = function (){
this.style.backgroundColor = 'orange';
}.bind(this)
}
t.call(btn1);
t.call(btn2);
4、函数/方法 通过 apply()调用:
也可以动态的更改 this 的指向,和 call()很像,传递参数的方式不一样
语法:object1.方法 / 函数.call(object2,['参数1','参数2',........,'参数N'])
如果传递的参数不是 array
=> Uncaught TypeError: CreateListFromArrayLike called on non-object
var Cat = {
name: '小黑猫'
}
var Tigger = {
name: '白虎',
eat: function(obj){
console.log('角色 =>'+this.name + ' 技能 :'+obj);
}
}
Tigger.eat.call(Cat,'别看我小,我也会吃人...');
Tigger.eat.apply(Cat,['别看我小,我也会吃人...']);
以上就是this 的简单使用,可以在去深入了解!