JS经典理解例子
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经典理解例子的更多相关文章
- js经典闭包
setTimeout函数之循环和闭包 前言 之前对于setTimeout的一个经典问题的理解总是感到很迷惑,现在好像清晰一点了,所以把我的理解写下来,我对js的理解也不深入,如果有错误,请务必指出.以 ...
- js经典试题之原型与继承
js经典试题之原型与继承 1:以下代码中hasOwnProperty的作用是? var obj={} …….. obj.hasOwnProperty("val") 答案:判断obj ...
- jquery ui中的dialog,官网上经典的例子
jquery ui中的dialog,官网上经典的例子 jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这 ...
- js面向对象理解
js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是, ...
- js经典试题之数组与函数
js经典试题之数组与函数 1:列举js的全局函数? 答案:JavaScript 中包含以下 7 个全局函数escape( ).eval( ).isFinite( ).isNaN( ).parseFlo ...
- JS之理解继承
JS之理解继承:https://segmentfault.com/a/1190000010468293 1.call继承,也叫借用构造函数.伪造对象或是经典继承.call继承回把父类的私有属性和方法继 ...
- Js经典相册
Js经典相册 点击下载
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- 【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
随机推荐
- Laravel Vuejs 实战:开发知乎 (5)设计问题表
1.执行命令: php artisan make:model Models/Question -cm 2.设计问题的数据库迁移文件中的字段: <?php use Illuminate\Datab ...
- CSS学习(5)更多的选择器
1.通配符选择器 * 表示选中所有元素 *{color:red;} 2.属性选择器 根据属性名和属性值选中元素 https://developer.mozilla.org/zh-CN/docs/We ...
- Scala实现网站流量实时分析
之前已经完成zookeeper集群.Hadoop集群.HBase集群.Flume.Kafka集群.Spark集群的搭建:使用Docker搭建Spark集群(用于实现网站流量实时分析模块),且离线分析模 ...
- Wx-小程序-图片预览、保存
点击图片预览 长按图片保存 点击按钮保存到手机相册 view: <!--wxml--> <text>点击图片预览.长按保存图片.点击按钮保存到系统相册</text> ...
- Anaconda"无法定位程序输入点 OPENSSL_sk_new_reserve 于动态链接库Anaconda3\Library\bin\libssl-1_1-x64.dll上"的解决办法
Anaconda"无法定位程序输入点 OPENSSL_sk_new_reserve 于动态链接库Anaconda3\Library\bin\libssl-1_1-x64.dll上" ...
- EntityFramework 插入自增ID主从表数据
原因: 数据库中的两个表是主从表关系,但是没有建外键,而表的id用的是数据库的自增整数,导致在使用EF导入主从表数据时,需要先保存主表数据,取到 主表的自增id后才能插入从表数据,这样循环之下,数据插 ...
- [转载]PHP开发环境 AppServ 2.5.10 安装及修改
[转载]PHP开发环境 AppServ 2.5.10 安装及修改 原文地址:PHP开发环境 AppServ 2.5.10 安装及修改 appserv下载地址:http://www.appservn ...
- 【PAT甲级】1098 Insertion or Heap Sort (25 分)
题意: 输入一个正整数N(<=100),接着输入两行N个数,表示原数组和经过一定次数排序后的数组.判断是经过插入排序还是堆排序并输出再次经过该排序后的数组(数据保证答案唯一). AAAAAcce ...
- 【C语言】计算N名同学的某门功课的平均成绩
分析: 循环输入number只童鞋的成绩,累加为sum,最后输出sum/number即可! 代码: #include<stdio.h> int main() { , score;//sco ...
- linux查看端口占用程序
netstat -apn 查看所有进程和端口的使用情况,看到9000端口和28080端口被java程序占用,PID分别为17607,1442 ps -aux|grep 17607 ps -aux|g ...