javascript 设计模式学习笔记（一）--基础（this）_当用 new 运算符调用函数时,该函数总会返回一个对象,通常情况下,构造器里的 this-CSDN博客

本文链接：https://blog.csdn.net/pyx6119822/article/details/52288605

在javascript编程中，this,Function.peototype.call和Function.peototype.apply都有着广泛的应用，在学习设计模式之前先理解一下这三个概念。

1.this

js中的this总是指向一个对象，而具体指向哪一个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。

1.1this的指向

通常情况下this的指向大致可以分为以下4种：

作为对象的方法调用
作为普通函数调用
构造器调用
调用Function.peototype.call和Function.peototype.apply

示例：
1.作为对象的方法调用

var obj={
    a:1,
    getA:function(){
        alert(this===obj);//输出：true
        alert(this.a);//输出：1
    }
}

2.作为普通函数调用

window.name="globalName";
var getName=function(){
    return this.name;
};
console.log(getName());//输出：globalName

或者

window.name="globalName";
var myObject={
    name:'seve',
    getName:function(){
        return this.name;
    }
};
var getname=myObject.getName;
console.log(getName());//输出：globalName

注意：
在dom节点的事件函数内部，定义局部方法A，当A被当作普通函数调用时，A内部的this指向了window

<html>
    <body>
        <div id="div1">div控件</div>
    </body>
    <script>
        window.id='window';
        document.getElenmentById('div1').click=function(){
            alert(this.id);//输出：'div1'
            var that=this;//保存div的引用
            var callback=function(){
                alert(this.id);//输出：'window'
                alert(that.id);//输出：'div1'
            }
            callback();
        };
    </script>
</html>

3.构造器调用
Javascript中没有类，但可以从构造器中创建对象，同时提供了new运算符，使得构造器看起来像一个类
当用new运算符调用函数时，该函数总会返回一个对象，通常情况下，构造器里的this就指向返回的这个对象。

var MyClass=function(){
    this.name='seven';
};
var obj=new MyClass();
alert(obj.name);//输出：'seven'

注意：
如果构造器显示地返回了一个object类型的对象，那么此次运算结果最终会返回这个对象，而不是上面那个this。

var MyClass=function(){
    this.name='seven';
    return{ 
             name:'anne';
    }
};
var obj=new MyClass();
alert(obj.name);//输出：'anne'

如果构造器不显示地返回任何数据，或者返回一个非对象类型的数据，就不会造成上述问题

var Myclass=function(){
    this.name='seven';
    return   'anne';//返回string类型
};
var obj=new MyClass();
alert(obj.name);//输出'seven'

4.Function.prototype.call或Function.prototype.apply调用
与普通函数调用相比，这两个函数能动态地改变传入函数的this。

var obj1={
    name:'seven',
    getName:function(){
        return this.name;
    }
};
var obj2={
    name:'anne',
};
console.log(obj1.getName());//输出：seven
console.log(obj1.getName.call(obj2));//输出：anne

1.2丢失的this
以下是经常遇到的一个问题

var obj={
    myName:'seven',
    getName:function(){
        return this.myName;
    }
};
console.log(obj.getName());//输出：seven
var getName2=obj.getName;
console.log(getName2);//输出：undefined

注解：
第一次调用的时候，getName方法是作为obj对象的属性被调用的，此时的this指向obj对象
第二次调用是普通函数调用方式，此时的this指向全局window的