JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解

 funtion 类名(属性一){
                  this.属性=属性一;
                this.方法=function(){}
                 // this指向谁？ -- 即将调用当前构造函数的对象。
         }

 var obj = new 类名(属性一的Value);
                 // 原构造函数中this，指向新创建的obj对象；
         obj.方法(); 调用方法
         obj.属性; 调用属性

// ① 定义一个类(构造函数)
        function Person(name,age,sex){
            // 类的属性
            this.name = name;
            this.age = age;
            this.sex = sex;
            
            // 类的方法
            this.say = function(){
                alert("我叫"+this.name+";今年"+this.age+"岁；是一个"+this.sex+"生");
            }
        }
        
        // 从类中，实例化出一个对象。并给对象的属性赋值
        var zhangsan = new Person("张三",18,"男");
        //zhangsan.say();
        
        var lisi = new Person("李二狗",16,"男");
        //lisi.say();

function func(){
    console.log(this);
}

func(); // this--->window
//【解释】 我们直接用一个函数名()调用，函数里面的this，永远指向window。

// 狭义对象
    var obj = {
        name:"obj",
        func1 :func
    };
    obj.func1(); // this--->obj
//【解释】我们将func函数名，当做了obj这个对象的一个方法，然后使用对象名.方法名， 这时候函数里面的this指向这个obj对象。

    // 广义对象
    document.getElementById("div").onclick = function(){
        this.style.backgroundColor = "red";
}; // this--->div
//【解释】对象打点调用还有一个情况，我们使用getElementById取到一个div控件，也是一种广义的对象，用它打点调用函数，则函数中的this指向这个div对象。

var arr = [func,1,2,3];
arr[0]();  // this--->arr
//【解释】这个，我们把函数名，当做数组中的一个元素。使用数组下标调用，则函数中的this将指向这个数组arr。

setTimeout(func,1000);// this--->window
//setInterval(func,1000);
//【解释】使用setTimeout、setInterval等window内置函数调用函数，则函数中的this指向window。

var obj = new func(); //this--->new出的新obj
//【解释】这个就是第二部分我们使用构造函数new对象的语句，将函数用new关键字调用，则函数中的this指向新new出的对象。

var obj1 = {
            name:‘obj1‘,
            arr:[setTimeout(func,3000),1,2,3]
        }
        document.getElementById("div").onclick = obj1.arr[0];
        // 函数最终调用者：setTimeout ，符合规律⑤ this--->window
        
        
        var obj2 = {
            name:‘obj1‘,
            arr:[func,1,2,3]
        }
        document.getElementById("div").onclick = obj2.arr[0]();
        // 函数最终调用者：数组下标 ，符合规律③ this--->arr
        

        var obj3 = {
            name:‘obj1‘,
            arr:[{name:‘arrObj‘,fun:func},1,2,3]
        }
        document.getElementById("div").onclick = obj3.arr[0].fun();
    // 函数最终调用者：{name:‘arrObj‘,fun:func} ，符合规律② this--->obj

var fullname = ‘John Doe‘;
        var obj = {
           fullname: ‘Colin Ihrig‘,
           prop: {
              fullname: ‘Aurelio De Rosa‘,
              getFullname: function() {
                 return this.fullname;
              }
           }
        };
        var arr = [obj.prop.getFullname,12,3,4,5];
        console.log(arr[0]());//this指向数组，数组没有fullname属性，所以未定义！
        console.log(obj.prop.getFullname()); // Aurelio De Rosa
        //函数最终调用者：obj.prop  this--->obj.prop
        var test = obj.prop.getFullname; 
        console.log(test());  // John Doe
        // 函数最终调用者： 函数() window  this-->window
        obj.func = obj.prop.getFullname;
        console.log(obj.func()); // this最终调用者是obj，所以this指向obj