javascript 设计模式学习笔记（一）--基础（this）

来源：互联网发布：mac ssh客户端工具编辑：程序博客网时间：2024/05/17 00:10

在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());//输出：sevenconsole.log(obj1.getName.call(obj2));//输出：anne

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

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

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

0 0

javascript 设计模式 学习笔记（一）--基础（this）

javascript 设计模式学习笔记（一）--基础（this）