Eddie Chen


A Front-End Web Developer;

A fakegeek studying at Uestc;

A boy who loves the logic and structure of coding;


Resume

Project List

+

福州金玉堂网站

form 2011 - 2012

福州金玉堂企业网站开发

页面重构, jQuery开发, 基于Ajax的在线聊天子系统, 实时期货价格图表生成(基于Ajax&jsonp)

→ View website

+

diandian.com 数个模板开发

+

中国技术供需在线

form 2011 - 2012

中国技术供需在线-教育部全国高校产学研合作公共服务网络平台

负责一期项目后端开发, 数据库设计

基于PHP, CI框架开发

→ View website

+

电子科技大学校工会新版网站

2011

电子科技大学校工会新版网站

负责后台开发(PHP+CI)以及项目管理

→ View website

+

电子科技大学科技处网站

2010

电子科技大学科技处网站

负责部分页面重构

→ View website

Skill

HTML

80%

CSS & CSS3

70%

Javascript

80%

PHP

60%
*skill scores are based on the test provided by Elance.com.

Blog

浅谈Javascript中的"this"对象


javascript中的函数非常灵活, 几乎可以做任何事情, 但同时也常常导致一些意料之外的结果。 其中 this 对象的多变性常常困扰初学者。 总结javascript中的函数调用方式, 总共有4种。 分别是 直接函数调用、作为对象方法的调用、构造器模式调用,以及apply(call)方式的调用。


  1. 直接函数调用

    直接函数调用比较容易理解, 这种情况下 , this 被绑定到全局对象上。可以理解为window对象。这里不在过多叙述。

  2. 作为对象的方法调用

    所谓对象方法调用,即以对象属性存取操作符【.】或者下标方式Object['subscript']来调用对象的方法。(javascript中没有键值对类型的数组,可以通过Objcet['subscript'] 方式存取对象属性)。

    var testObj = {
        name : "test",
        getName: function(){                                          
            console.log(this);
            return this.name;
            }  
        }
    
    testObj.getName();
    

    可以发现this指向为

    Object {name: "test", getName: function}
    
  3. 构造器模式调用

    以new 关键字来调用函数时, 行为类似构造函数, 将返回一个隐藏链接到该函数prototype的新对象,并把this绑定到新对象上。

    function Test(val){
        this.attr = val;
    }
    

    在new Test("string")时,返回的新对象的attr属性被设置成了"string"。

  4. apply或者call方式的调用

    apply 和 call 除了参数指定方式上没有任何区别, 其中apply可选两个参数,第一个参数为上下文变量,即指派给函数中this的值, 第二个参数为参数数组,指派给函数中的arguments的值。

    call接受的第一个参数也是上下文变量, 从第二个参数起的每一个参数都将作为函数调用参数。即 apply( null, [1,2,3] ) 与 call( null, 1, 2, 3 ) 等价。

    在这种调用方式下, 函数中的this指向了显式声明的对象上下文, 从而实现了函数调用上下文的变化。


关于this 就简单总结到这里。错误和不足之处,欢迎指正。


Date:

About

This is Eddie Chen, a front-end web developer, a member of Dreamfly Studio of UESTC.
Keep in touch:
haozi[a,t]haozi.name


Powered by Eddie Chen.