前一阶段看到大神在网上贴出的测试个人js理解的代码。

在此我在此借用大神的代码,进行自我复述,大神文章参见:http://www.imooc.com/article/1731

代码1:

function foo(){
console.log(this.a);
}
function doFoo(fn){
fn();
}
function doFoo2(o){
o.foo();
}
var obj = {
a: 2,
foo: foo
};
var a = "I'm an a";
doFoo(obj.foo);
doFoo2(obj);

我的理解:

先说doFoo(obj.foo)

传入的参数obj.foo即对象obj的元素foo,内容为foo。

此时传入的foo在方法doFoo中就变成了调用foo()方法。

因为foo()是定义在最外层的,此时的this指向最外层对象window,所以取得的a应该是在最外层定义的 var a = "I'm an a";。

所以第一个方法返回的是I'm an a。

其次说doFoo2(obj)

传入的参数是obj对象.

此时在doFoo2中调用的是obj.foo()。

这时foo()方法中的this重新指向了obj对象,所以this.a取得的是obj对象中的a。

所以第二个方法返回的是2.

大神的分析:

在Javascript中,this指向函数 执行时的当前对象,而非声明环境有
执行doFoo的时候执行环境就是doFoo函数,执行环境为全局。
执行doFoo2时是在对象内部调用函数,this指针指向该对象。

代码2:

function foo(somthing){
console.log(this.a, somthing);
}
function bind(fn, obj){
return function(){
return fn.apply(obj, arguments);
}
}
var obj = {
a:2
}
var bar = bind(foo, obj);
var b = bar(3);
console.log(b);

第二段代码,再次先说我自己的理解:

结论先行:这里展示apply的作用-修改方法作用的对象,也可以说是修改this的指向

解释:

原本在foo函数的定义中,this指向的是全局对象,而在函数bind中,利用apply,bind将this指向了obj,即fn方法实际作用在obj上了。

之后的代码便是定义一个obj对象直接量,然后将利用bind方法将foo方法的作用对象指向了obj,最后再通过定义的bar传入参数"3"。

也就是说,在最后bar(3)执行的时候,调用的方法foo作用于对象obj上(这里的obj指的是已经定义的对象直接量),所以方法执行的是下面的内容:

console.log(obj.a,3);

而obj的a是2,所以输出的内容是2 3。

再次看大神的分析,发现自己漏掉了最后方法没有返回参数,所以还会返回一个undefined。

贴上大神的分析:

apply、call、bind都有个作用就是改变作用域,这里用apply将foo函数的作用域指向obj对象,同时传入参数。
再简单分析一下bind函数内部的嵌套,执行bind函数的时候返回的是一个匿名函数,所以执行bar(3)的时候实际上是执行的bind内部的匿名函数,返回的是之前传入的foo函数的执行结果。
函数没有返回值的情况下默认返回undefined。

代码3:

function foo(a,b){
this.val = a+b;
}
var bar = foo.bind(null, 'p1');
var baz = new bar('p2');
console.log(baz.val);

未完待续

javascript之观码说理的更多相关文章

  1. Javascript 二维码生成库:QRCode

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JavaScript特效源码(1、文字特效)

    注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...

  3. JavaScript二维码生成——qrcode.js

    在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...

  4. javascript Base64转码解码

    javascript 使用btoa和atob来进行Base64转码和解码 $scope.checkAddCookie = function() { var expireDate = new Date( ...

  5. 使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)

    在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...

  6. JavaScript特效源码(4、鼠标特效)

    1.鼠标感应--渐现特效 鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚] [修改图片名称即可][共2步] ====1.将以下代码加入HTML的<head></head> ...

  7. JavaScript特效源码(8、其他特效)

    1.中文日期 中文日期[无须修改][共1步]] ====1.将以下代码加入HEML的<body></body>之间 <script LANGUAGE="Java ...

  8. JavaScript特效源码(7、页面特效二)

    7.将站点加入频道栏 将站点加入频道栏[看详细说明] ====1.加入channel的方法:使用如下连接指向你的频道文件*.cdf. <a href="javascript:windo ...

  9. JavaScript特效源码(6、页面特效一)

    1.页面全屏 页面全屏显示[ALT+F4关闭][共1步][新弹出窗口并以全屏幕方式显示] ====1.将以下代码加入HTML的<body></body>之间: <form ...

随机推荐

  1. SQL SERVER触发器游标小记

    今天接到个需求用触发器来实现通过条件对其他表的更新.好久没摸SQL SERVER,电脑里也没SQL SERVER安装包,同事遂发来个安装包,一看吓一跳,3.6G!!!!经过漫长等待后,开始作业.需求如 ...

  2. oracle 认证方式

    Oracle登录的时候有两种认证方式,一种是“操作系统认证”,一种是“口令文件认证”.1.当采取操作系统认证的时候,在本地用任何用户都可以以sysdba登陆:(默认方式)2.当采取口令文件认证的时候, ...

  3. TIJ读书笔记06-终结清理和垃圾回收

    TIJ读书笔记06-终结清理和垃圾回收 finalize()方法 垃圾回收器如何工作 java的垃圾回收是由jvm来控制的.所以需要java程序员参与的部分不是很多. 但是在这里需要明白一点,java ...

  4. Linux_05------Linux之vim编辑器

    行 * -/xxx 向后搜索 * -?xxx 向前搜索 * 命令模式下: * -h: 光标左移 * -j: 光标下移 * -k: 光标上移 * -l: 光标右移 * -ctrl+f: 向下翻页(fro ...

  5. java时间相减(转载)

    package com.jie.java.phone; import java.text.ParseException; import java.text.SimpleDateFormat; impo ...

  6. css 透明(transparent)

    opacity :  .75;     //standard css3 style for transparency -moz-opacity : .75;        // transparenc ...

  7. 天气api

    http://php.weather.sina.com.cn/xml.php?city=%D6%D8%C7%EC&password=DJOYnieT8234jlsK&day=0 cit ...

  8. LightOJ 1285 - Drawing Simple Polygon (几何,极角排序)

    1285 - Drawing Simple Polygon   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: ...

  9. 超链接的那些事(二): 属性href

    a标签的属性之一 href 1. 定义 href 属性用于指定超链接目标的 URL. 2. 用法     ①. 锚点 同一页面添加锚点 (1)<a href="#test"& ...

  10. lucene中模糊搜索的应用场景

    模糊搜索:wildCardQuery的时候,是用* 表示全部,?表示一个字符,那么直接用*搜索,就能查到当前索引文件的全部数据个数 这里搜索查到的个数和用工具查到的个数是一致的...