ES5进阶-this对象-组团学

一、this在全局与普通函数中

在全局域普通函数中this指向的就是window对象

console.log(this);//window
var num = 10;
console.log(this.num);
            
function func(){
    console.log(this);//window
    var name = "sunck";
    console.log(this.name);//name不是全局变量
}
func()

二、this在定时器中

在定时器中调用this会指向window

var timer = setInterval(func, 2000);
function func(){
    console.log(this);
}

问题：定时器存在于构造函数中，且执行的是对象方法，那么在该方法中this会指向window对象，无法引用当前对象

function Person(name, age){
    this.name = name;
    this.age = age;
                
    setInterval(this.say, 2000);
}
Person.prototype.say = function(){
    console.log(this);
    console.log(`${this.name} is a good man,I am ${this.age} years old!`);
}
var per = new Person("sunck", 18);

解决问题：利用bind()方法修复bug

function Person(name, age){
    this.name = name;
    this.age = age;
    
    this.func = this.say.bind(this);
                
    setInterval(this.func, 2000);
}
Person.prototype.say = function(){
    console.log(this);
    console.log(`${this.name} is a good man,I am ${this.age} years old!`);
}
var per = new Person("sunck", 18);

解决问题：找一个变量把this所指向的当前对象先保存下来，定时器第一个参数为一个匿名函数，在匿名函数中使用临时变量调用相关方法

function Person(name, age){
    this.name = name;
    this.age = age;
    
    var _this = this;//私有属性等于当前对象本身
    
    setInterval(function(){
        //_this代表当前对象,谁调用的say,那么在say()方法中this就代表谁
        _this.say();
    }, 2000);
}
Person.prototype.say = function(){
    console.log(this);
    console.log(`${this.name} is a good man,I am ${this.age} years old!`);
}
var per = new Person("sunck", 18);

三、this在事件函数中

在事件函数中this会指向触发时间的元素对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <button type="button" id="btn">按钮</button>
        <script type="text/javascript">
            var jsBtn = document.getElementById("btn");
            jsBtn.addEventListener("click", func, false);
            function func(){
                console.log(this);
            }
        </script>
	</body>
</html>

问题：事件函数引用的是对象方法，那么在该方法中this会指向触发事件的标签对象，无法引用当前对象本身

var jsBtn = document.getElementById("btn");
function Person(name, age){
    this.name = name;
    this.age = age;
    
    jsBtn.onclick = this.say;
}
Person.prototype.say = function(){
    console.log(this);
    console.log(`${this.name} is a good man,I am ${this.age} years old!`);
}
var per = new Person("sunck", 18);

解决问题：利用bind()方法修复bug

var jsBtn = document.getElementById("btn");
function Person(name, age){
    this.name = name;
    this.age = age;
    
    jsBtn.onclick = this.say.bind(this);
}
Person.prototype.say = function(){
    console.log(this);
    console.log(`${this.name} is a good man,I am ${this.age} years old!`);
}
var per = new Person("sunck", 18);

解决问题：找一个变量把this所指向的标签先保存下来，然后在内部函数中使用这个临时变量

var jsBtn = document.getElementById("btn");
function Person(name, age){
    this.name = name;
    this.age = age;
    
    var _this = this;//私有属性等于当前对象本身
    
    jsBtn.onclick = function(){
        _this.say();
    }
}
Person.prototype.say = function(){
    console.log(this);
    console.log(`${this.name} is a good man,I am ${this.age} years old!`);
}
var per = new Person("sunck", 18);

四、this在对象方法中

this的指向是在调用的时候才能决定，谁调用就指向谁

var obj = {
    description: "sunck is a good man",
    getDescription: function(){
        console.log(this);
        console.log(this.description);
    }
}
obj.getDescription();//sunck is a good man

description = "sunck is a nice man";
var obj = {
    description: "sunck is a good man",
    getDescription: function(){
        console.log(this);
        console.log(this.description);
    }
}
var test = obj.getDescription;
test();//sunck is a nice man

五、this在构造函数中

构造函数中的this会指向即将创建出来的对象

原理：使用new调用构造函数时，会先创建出一个空对象，然后调用call函数把构造函数中的指针修改为指向这个空对象，执行完构造函数之后，这个空对象也就有了相关的属性和方法

function Person(name, age){
    this.name = name;
    this.age = age;
}
var per = new Person("sunck", 18);
console.log(per.name, per.age);

当构造函数返回一个对象时，new创建的空对象中存放的就是返回出来的对象，this指针会指向返回的这个对象

function Person(name, age){
    this.name = name;
    this.age = age;
    
    return {
        height: 180, 
        weight: 78,
        run: function(){
            console.log(this.height);
            console.log(this.name);
        }
    };
}
var per = new Person("sunck", 18);
console.log(per);
per.run();

构造函数返回其他非对象类型(包括null)值，这不会修改this的指向

function Person(name, age){
    this.name = name;
    this.age = age;
    
    return 1
    //return undefined 
    //return null
}
var per = new Person("sunck", 18);
console.log(per);
console.log(per.name);