1.

var name = 'the window';

var obj = {

  name:"my obj",

  getNameFunc:function(){

    return function(){

      return this.name;

    }

  }

};

alert(obj.getNameFunc()());//问输出结果是多少

答案:the window

理解:这里的obj.getNameFunc()返回了一个function,然后再再外面调用这个function,这时候调用function的是window对象,所有输出the window

2.

var name = 'the window';

var obj = {

  name:"my obj",

  getNameFunc:function(){

    var that = this;

    return function(){

      return that.name;

    }

  }

};

alert(obj.getNameFunc()());//问输出结果是多少

答案:my obj

理解:返回的这个function是getNameFunc的一个内部函数,而他使用了外部函数定义的变量,所以产生了闭包,再调用执行return that.name;的时候,可以再闭包中找到这个that变量(即外部函数的this),所有最终相当于调用了obj 的name,所以返回my obj

3.

function A(){}

A.prototype.n = 1;

var b = new A();

A.prototype={

  n:2,

  m:3

}

var c = new A();

console.log(b.n,b.m,c.n,c.m);//问输出多少

答案:1,undefined,2,3

理解:b 对象的原型__proto__指向的是第一次创建A functon的时候的A的prototype,只是上面多加了一个属性n值为1。当后面改变A的prototype的指向另外一个对象时并不会改变b对象的__proto__的指向,只是改变了后面新创建的c对象的指向。

4.

var F = function (){}

Object.prototype.a = function (){

  console.log('a()');

}

Function.prototype.b = function (){

  console.log('b()');

}

var f = new F();

f.a();

f.b();

F.a();

F.b();

问依次输出是什么?

答案:a()  报错  a()  b()

理解:首先执行var F = function (){}的时候创建了F,F的__proto__指向Function的prototype,所以再Function的prototype上面加的属性F是可以访问的,所以F.b();应该输出b()。而Function的prototype是Object的一个对象,这个对象是由Object作为Function产生的,所以这个这个对象的__proto__指向Object的prototype,所以F.a();应该输出a()。

var f = new F();所以f .__proto__指向F 的prototype,而F的的prototype是Object的一个对象,这个对象是由Object作为Function产生的,所以这个这个对象的__proto__指向Object的prototype,所以f.a();应该输出a()。而prototype和Functiono的prototype没有直接联系,所以f.b();应该会报错找不到这个方法。

5.

console.log('global begin:'+i);

var i = 1;

foo(1);

function foo(i){

  if(i==4){

    return;

  }

  console.log('foo begin:'+i);

  foo(i+1);

  console.log('foo end:'+i);

}

console.log('global end:'+i);

问:所有的输出结果

答案:global begin:undefined  foo begin:1  foo begin:2  foo begin:3  foo end:3  foo end:2  foo end:1  global end:1

理解:这个比较简单,按代码执行顺序就能知道结果。

6.

function a (){}

var a;

console.log(typeof(a));//问输出什么

答案:function

理解:变量提升先于函数提升,所以先执行变量提升a=undefined,然后再将a赋值给函数。

7.

if(!(b in window))

{

  var b = 1;

}

cnsole.log(b);//问输出什么

答案:undefined

理解:再es5里面没有块作用域,所以再{var b = 1;}相当于再外面执行var b = 1;,由于变量提升再代码执行前window中就有了b属性只是值为undefined,所以b in window为true,不执行判断语句里面的代码,输出undefined

8.

var c = 1 ;

functiong c(c){

  console.log(c);

}

c(2);//问输出什么

答案:报错:c不是一个函数

理解:由于函数和变量提升,所以实际的执行顺序是:var c ;   function c(c){console.log(c);};   c = 1;  c(2);

9.

var x = 10;

function fn(){

  console.log(x);

}

function show(f){

  var x = 20;

  f();

}

show(fn);

问:输出结果是什么

答案:10

理解:由于fn是最外层的函数所以没有闭包产生,应该用函数的作用域来解决,函数的作用域是再定义函数的时候就已经产生了,并不是代码执行的时候产生,所以即便把fn作为参数传到了show()函数里面,但是执行代码时使用的作用域是定义函数时候的,fn是在最外层定义的,所以当自己内部找不到x的时候会去window上面找。

10.

var fn = function (){

  console.log(fn);

}

fn();

var obj = {

  f2:function(){

    console.log(f2);

  }

}

obj.f2();

问:输出结果是什么

答案:function (){console.log(fn);}   报错:找不到f2

理解:根据作用域,这里会生成三个作用域:最外层作用域/fn 作用域/f2作用域。根据自己找不到到外层去找,第一个外层能找到,第二个外层找不到;

注:如果第二个想输出obj的f2,则function中要写成console.log(this.f2); this指向调用这个函数的对象也就是obj。

JS经典理解例子的更多相关文章

  1. js经典闭包

    setTimeout函数之循环和闭包 前言 之前对于setTimeout的一个经典问题的理解总是感到很迷惑,现在好像清晰一点了,所以把我的理解写下来,我对js的理解也不深入,如果有错误,请务必指出.以 ...

  2. js经典试题之原型与继承

    js经典试题之原型与继承 1:以下代码中hasOwnProperty的作用是? var obj={} …….. obj.hasOwnProperty("val") 答案:判断obj ...

  3. jquery ui中的dialog,官网上经典的例子

    jquery ui中的dialog,官网上经典的例子   jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这 ...

  4. js面向对象理解

    js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是, ...

  5. js经典试题之数组与函数

    js经典试题之数组与函数 1:列举js的全局函数? 答案:JavaScript 中包含以下 7 个全局函数escape( ).eval( ).isFinite( ).isNaN( ).parseFlo ...

  6. JS之理解继承

    JS之理解继承:https://segmentfault.com/a/1190000010468293 1.call继承,也叫借用构造函数.伪造对象或是经典继承.call继承回把父类的私有属性和方法继 ...

  7. Js经典相册

    Js经典相册 点击下载

  8. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  9. 【前端】Vue.js经典开源项目汇总

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

随机推荐

  1. python基础 pyc

    关于pyc的几点记录: python运行时会将python语句----->"字节码"------>转发到"虚拟机" 字节码:在大型的python程序 ...

  2. Git - 06. git checkout

    1. 概述 已经学会查看 提交记录 尝试在 提交记录 之间做跳转 2. 命令 跳转到提交 概述 跳转到 日志 里的某次提交 命令 # 撤销 工作区的所有改动, 返回 当前分支 的 上一个提交 > ...

  3. wix中ServiceInstall与ServiceControl的关系

    上面那篇之后其实还踩了个坑,安装Windows服务确实是打包进去了,但死活不能安装成功,从提示和日志看正好是Windows服务处理的地方出现了异常.以为是服务启动失败,但是服务在服务管理里手动启动是没 ...

  4. 利用单臂路由实现VLAN间的路由

    实验4:利用单臂路由实现VLAN间的路由. 实验原理:  实验内容: 本实验模拟公司网络场景,路由器R1是公司的出口网关,员工PC通过接入层交换机(如S2和S3)接入公司网络,接入层交换机又通过汇聚交 ...

  5. JDK8;HashMap:再散列解决hash冲突 ,源码分析和分析思路

    JDK8中的HashMap相对JDK7中的HashMap做了些优化. 接下来先通过官方的英文注释探究新HashMap的散列怎么实现 先不给源码,因为直接看源码肯定会晕,那么我们先从简单的概念先讲起   ...

  6. JS-this的使用

    做前端开发已经半年之多了,前几天看见apply时心生疑惑,于是查阅了好多资料但还是不太理解,只知道是源于this的问题,今天偶然看到了阮一峰大佬的讲解js中的this问题(http://www.rua ...

  7. 00-Docker基本安装

    目录 00-Docker基本安装 参考 安装与配置 启动与测试 00-Docker基本安装 Docker Version: 19.03.5

  8. Linux - 重启wifi和网络

    iwconfig sudo ifconfig wlp4s0 down sudo iwconfig wlp4s0 power off sudo ifconfig wlp4s0 up sudo servi ...

  9. idea 创建maven子父工程

    1.创建maven工程: 2. 创建工程名称: 3.删除父工程下的src文件夹,指定打包方式为pom,添加maven依赖: 4.右键项目添加子工程: 5.添加子工程名称: 6.子工程创建成功: 7.依 ...

  10. thinkphp5.1注解插件

    前言: thinkphp5.1中用注解的方式实现: v0.1.0版本 数据验证器 请求过滤.格式化 属性对象注入 dev-master版本 额外支持 自动事务 数据缓存 如果您觉得好用,点个star哈 ...