JS高级学习笔记 —— 074 this是谁

/*
js的this到底是谁？
js中函数的4种调用方式
*/

<script type="text/javascript">

 alert(window.xx);

        /*
        1、普通函数调用
        this的值指向window
        准确的说，是this为null，被解释成window
        */

        function t() {
            this.xx = 333;
        }
        t(); //undefined
        alert(window.xx); //333

</script> 

<script type="text/javascript">

        /*
        2、作为对象的方法调用
        this指向方法的调用者，即该对象
        */

        var obj = {xx:999,yy:888,t:function(){alert(this.xx)}};
        obj.t();

        var dog = {xx:'wangwang'};
        dog.t = obj.t;

        dog.t(); //wangwang

        /*
        作为方法调用时，
        this指向其调用那一刻的调用者，即母体对象
        不管被调用函数声明的时候属于方法还是函数
         */
        show = function() {
            alert('show' + this.xx);
        }

        dog.t = show;
        dog.t(); //show wangwang

</script> 

<script type="text/javascript">

        /*
        3、函数作为构造函数调用时
        js中没有类的概念，创建对象是用构造函数来完成，或者直接用json格式{}来写对象

        new Dog发生了以下几个步骤
        a：系统创建空对象 {},(空对象constructor属性指向Dog函数)
        b：把函数的this指向-->该空对象
        c：执行该函数
        d：返回该对象
        */

        function Dog(name,age) {
            this.name = name;
            this.age = age;
            this.bark = function() {
                alert('this is ' + this.name + '!');
            }
        } //this is huzi!

        var dog = new Dog('huzi',2);
        dog.bark();


        // 下面这个返回什么?
        function Pig() {
            this.age = 99;
            return 'abc';
        }

        var pig = new Pig();
        //Pig对象，因为函数作为构造函数运行时，return的值是忽略的，还是返回对象
        console.log(pig);          

</script> 

<script type="text/javascript">

        /*
        4、函数通过call，apply调用
        语法格式：函数.call(对象，参数1，参数2...参数N)
        */

        function t(num) {
            alert('我的真实年龄是' + this.age);
            alert('但我一般告诉别人我' + (this.age + num))
        }

        var human = {name:'lisi',age:28};

        human.t = t;
        human.t(-10);
        // this指向了human，但是human多了个方法.


        // 接下来，我们不把t赋为human的属性，也能把this指向human
        var wangwu = {name:'wangwu',age:30};
        t.call(wangwu,-15);


        /*
        解释
        fn.call(对象obj，参数1，参数2...参数N)

        运行如下：
        a) fn函数中的this指向-->对象obj
        b) 运行fn(参数1，参数2...参数N)
        */

</script>