最近在看关于拖延症的一本书《拖拉一点也无妨》,后面得出结论是自己写博客大部分处于两种状态,心情很好和心情很不好的时候。因为正常状态下感觉写博客吧,是件很麻烦的事情,不如去看看电影看看漫画啥的。最近在看漫画《进击的巨人》和《一拳超人》,感觉是两种极端,哈哈。    

最近在进行某个项目的重写工作,前后端都要重新构架重写,时间给了一个月。项目的现状大概是后端一个类有一万行左右,包含几十个方法。每个方法从一两百行到上千行不等,大部分方法是没有参数和返回值的,全局的操作几百个成员变量。业务需求不明确,没人能说得清,反正任务就是在不影响现有的功能的情况下重构+重写。现有的功能有啥?也没人能说得清。你说测试怎么验收通过?反正测试也说不清。

前端也面临着同样的情况,基本上都是全局的function凑合成的,几个文件加起来也有1万+行。同样没人能说得清到底有啥东西。咱作为光荣的“接盘侠”现在就要负责处理这些留下的宝贵遗产了。前端重写+后端重写+数据库SQL性能调校。

前端打算引入EventProxy和Seajs来重新整理了。

好吧,闲话扯到这里,现在开始继续顺带的内容了,javascript中的this

一、Javascript中的this

话说javascript中的this是个变态吧,总结一下:                

隐式的改变this的指向的方法

1.直接用括号()调用function的方式,这时this指向的是全局对象。

2.作为对象的方法调用,那么就是指向调用方法的对象。下面就是通过改变this来借用方法。

    function addToArray() {
arguments.slice = Array.prototype.slice;
var add = arguments.slice(0);
return add.concat();
}

可能有些人没看明白,咱的文章习惯打破砂锅问到底嘛,再举几个例子 :

我们知道Function类型是javascript中的顶级类型,可以定义自己的属性和方法。假如有这么一个方法

Function.prototype.test = function () {
    console.log(this === Function.prototype)
}

这种写法我相信有一点js经验的人都应该见过,这样写就可以给所有的函数实例加上了test方法,可具体是怎么实现的呢?我想很多人就说不清楚了。

上面这种写法,如果这样调用,会显示什么呢?

Function.prototype.test()

答案是 true !

这没什么好奇怪的,因为此时调用test方法的的确是Function类的prototype属性的对象。但如果你想想,如果this指向的是prototype的话,那么test方法为什么会在每个函数实例中都能调用呢?

因为我们的确不会像上面这样直接调用test方法,而是通过Function类的实例来调用test方法,这时候有东西悄悄发生了变化。没错,这就是this的指向。

如果有人还记得我上篇文章谈谈javascript中的prototype与继承的话,就知道javascript中的对象就是一个指向prototype的指针和一个自身的属性列表

所以作为函数类的实例,其实是通过指针的方式隐式借用了Function类的prototype属性中的所有方法。这时this指向的就不再是prototype对象,而是这个实例。

用代码来表示,类似于

this.test = Function.prototype.test

这里的this指向的是函数类的实例,因此调用的时候,结果就为false。

function myFunction(){}
myFunction.test()

显式的改变this的一些方法和关键字

1.call

    function addToArray() {
var add = Array.prototype.slice.call(arguments,0);
return add.concat();
}

2.apply

    function addToArray() {
var add = Array.prototype.slice.apply(arguments,[0]);
return add.concat();
}

3.bind (ECMA Script5)

它可以看做是call 和apply的延迟版本,如果不存在的话,可以这么实现

简单版本

if (!Function.prototype.bind) {
Function.prototype.bind = function (target) {
var func = this; return function () {
func.apply(target, arguments);
}
}
}

其实在ECMA Script5的规定中bind是可以预填参数的,考虑到性能的话,相对复杂一些。大部分情况下我们调用bind只是希望改变this的作用域,如果全部调用了slice和concat方法,那么性能就会相对不好。根据arguments的length不同,可以分2种绑定一共4种调用的case,在大部分情况下去获取更好的性能。

if (!Function.prototype.bind) {
(function () {
var slice = Array.prototype.slice; Function.prototype.bind = function (target) {
var func = this; if (arguments.length > 1) {
var args = slice.call(arguments, 1); return function () {
var allArgs = args; if (arguments.length > 0) {
allArgs = args.concat(slice.call(arguments));
} return func.apply(target, allArgs);
};
} return function () {
if (arguments.length > 0) {
return func.apply(target, arguments);
} return func.call(target);
};
};
}());
}

牢骚与javascript中的this的更多相关文章

  1. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  2. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  3. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  4. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  5. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  6. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  7. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  8. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

  9. Javascript中的valueOf与toString

    基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...

随机推荐

  1. [异常] VC6.0 error LNK2001: unresolved external symbol _main解决办法

    来自:http://www.douban.com/note/65638800/ 学习VC++时经常会遇到链接错误LNK2001,该错误非常讨厌,因为对于编程者来说,最好改的错误莫过于编译错误,而一般说 ...

  2. Chrome浏览器在Windows8/8.1下显示模糊的解决办法

    刚刚换了一台新电脑,安装完Windows 8.1,屏幕分辨率被自动设置为1920 X 1080,打开Chrome浏览器却发现内容显示非常模糊,不论如何改变Chrome的设置均没有效果,开启或关闭Chr ...

  3. ubuntu安装redis

    1.下载安装root@21ebdf03a086:/# apt-cache search redisroot@21ebdf03a086:/# apt-get install redis-server a ...

  4. paip.python php的未来预测以及它们的比较优缺点

    paip.python php的未来预测以及它们的比较优缺点 跟个php比..python有下列的优点: 1.桌面gui 功能强大. 主要是pyqt很好...而ruby qt 则好像不更新了..php ...

  5. ubuntu上安装mysql 编译安装

    为什么要折腾?首先说明的是ubuntu上安装mysql等软件是非常容易简单的,其简单的程度盖过windows上的安装,一句sudo apt-get install就可以搞定.如果想用最简便的方法安装m ...

  6. MySql的基本操作以及以后开发经常使用的常用指令

    第一章:数据类型和操作数据表MySQL语句的规范(1):关键字与函数名称全部大写(2):数据库名称,表名称,字段名称全部小写(3):SQL语句必须以分号结尾 1:命令行模式启动mysql服务net s ...

  7. EWM 强大的数据修复功能

    在上了EWM系统后,运行一段时间可能因为不正确的操作,系统意外情况数据不一致的问题,交货单行项目状态不致,等等报不一致的情况,EWM的自检功能比较强. 下面介绍一种数据不致的修复工具之一,tx: /S ...

  8. ImageEdit 展示图片(XAML, C#)

    <dxe:ImageEdit Source="/Gemr;component/Images/FakeUI/MedicalRecordFake.jpg" Stretch=&qu ...

  9. [转]java byte 数据类型(基础)

    package com.suypower.chengyu.test; public class ByteTest { /** * byte 8 bits -128 - + 127 * 1 bit = ...

  10. Mysql编码, Mysql编码流程, Mysql编码顺序, Mysql编码原理, Mysql编码修改依据

    编码查看方式以及解释说明: 需要以root用户身份登陆才可以查看数据库编码方式(以root用户身份登陆的命令为:>mysql -u root –p,之后两次输入root用户的密码),查看数据库的 ...