解析Javascript中难以理解的11个问题


Posted in Javascript onDecember 09, 2013

1.原始值与引用值

原始值存放在栈里, 引用值存放在堆里. 如程序:

function Person(id,name,age){
 this.id = id;
 this.name = name;
 this.age = age;
}
var num = 10;
var bol = true;
var str = "abc";
var obj = new Object();
var arr = ['a','b','c'];
var person = new Person(100,"笨蛋的座右铭",25);

2.undefined和null

undefined: 变量未定义; 是Undefined类型的专属值;

null:引用未分配; 是Null类型的专属值.

typeof(undefined) == undefined;
typeof(null) == object;
undefined==null;
undefined!==null;
null instanceof Object == false;
undefined instanceof Object == false;

虽然有Undefined和Null类型, 但是通过下面的例子说明这两个类型是不可见的, 也就是说我们只能使用他们的值:

alert(undefined instanceof Undefined);
alert(null instanceof Null);

3.伪数组

特点:
1) 具有length属性;

2) 像数组一样按索引顺序存取数据;

3) 不具备数组特有的操作数据的方法如push, pop, slice...

伪数组都可以通过Array.prototype.slice转换为真正的数组:

var faceArray = {0: 'a', 1: 'b', length: 2}//标准的伪数组;

var realArray = Array.prototype.slice.call(fakeArray);

js中的伪数组:arguments, node.childNodes, document.getElementsByTagName()...

IE中的问题 : IE中node.childNodes是不能用slice转化的.

Jquery中的伪数组 : Jquery本身就是一个伪数组:

alert($('.class1').length); alert($('.class1').[0].tagName);

4.关于简单类型的字面量

var a = 1; b = true, c = "ccc";

字面量看起来有类型

alert(typeof a);//number
alert(typeof b);//boolean
alert(typeof c);//string

但是通过instanceof却测不出来

alert(a instanceof Number)//false
alert(a instanceof Object)//false
alert(b instanceof Boolean)//false
alert(b instanceof Object)//false
alert(c instanceof String)//false
alert(c instanceof Object)//false

5.函数的prototype属性和对象实例的内部prototype属性

每个function(构造函数)都有一个prototype属性, 每个对象实例都有一个不可见的(mozilla把它公开了, 可以通过__proto__来取得)内部的prototype属性, 它指向构造函数的prototype属性. prototype还可以有它自己的prototype属性, 这构成了prototype链,  Object是最顶的对象, 所以所有的prototype链最终会指向Object.prototype. 当访问对象实例的属性/方法的时候, 从对象实例自己开始搜索, 若果搜索不到, 沿着prototype链向上搜索, 直到Object.prototype.prototype == null 为止.

6.构造函数的一个小秘密

var s = new function(){return "sss"};
alert(s);//[object Object]
s = new function(){return new String("sss")};
alert(s);//sss

关于这段代码的解释:

只要 new 表达式之后的 constructor 返回(return)一个引用对象(数组,对象,函数等),都将覆盖new创建的匿名对象,如果返回(return)一个原始类型(无 return 时其实为 return 原始类型 undefined),那么就返回 new 创建的匿名对象.

7.对象的创建的过程

function Person(name){
        this.name = name;    
}
Person.prototype = {
        getName: function(){return this.name}    
};
var p = new Person('zhangsan');

解密p的创建过程:

◦创建一个build-in object对象obj并初始化;

◦将p的内部[[Prototype]]指向Person.prototype;

◦将p作为this,使用arguments参数调用Person的内部[[Call]]方法, 即执行Person函数体, 并返回返回值, 如果没有return, 则返回undefined;

◦如果前一步返回的是Object类型, 则返回这个值给p, 否则返回obj.

8.对象的自有属性和继承属性

function Person(name){
        this.name = name;    
}
Person.prototype = {
        type: 'human',
        getName: function(){return this.name}    
};
var p = new Person('zhangsan');
alert(p.hasOwnProperty('type'));//false
p.type = 'ren';
alert(p.hasOwnProperty('type'));//true

运行结果很明确,对象的属性无法修改其原型中的同名属性,而只会自身创建一个同名属性并为其赋值。

9.函数对象的创建过程

创建一个build-in object对象fn;

将fn的内部[[Prototype]]设为Function.prototype;

设置内部的[[Call]]属性,它是内部实现的一个方法,处理函数调用的逻辑。(简单的理解为指向函数体);

设置fn.length为funArgs.length,如果函数没有参数,则将fn.length设置为0;

fn.prototype的constructor指向fn自己;

返回fn.

10.instanceof的原理

查看a是不是B的实例, 就是看B的prototype(构造函数的prototype属性)指向的对象在不在a的原形链上.

11.关于Function和Object的猜测

alert(Function instanceof Function);//true
alert(Function instanceof Object);//true  
alert(Object instanceof Function);//true
alert(Object instanceof Object);//true

想了好久, 没有想透......

Javascript 相关文章推荐
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
深入理解Javascript作用域与变量提升
Dec 09 #Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 #Javascript
jquery div拖动效果示例代码
Dec 08 #Javascript
jquery垂直公告滚动实现代码
Dec 08 #Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 #Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 #Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 #Javascript
You might like
农历与西历对照
2006/09/06 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
python实现俄罗斯方块
2018/06/26 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python实现磁盘日志清理的示例
2020/11/05 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
副总经理工作职责
2013/11/28 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
绩效管理实施方案
2014/03/19 职场文书
毕业生面试求职信
2014/06/23 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
办公室卫生管理制度
2015/08/04 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python