解析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中暂停功能的实现代码
Mar 04 Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
下拉框select的绑定示例
Sep 04 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
JavaScript 闭包的使用场景
Sep 17 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
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
js中style.display=""无效的解决方法
2014/10/30 Javascript
理解javascript回调函数
2014/12/28 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
Python列表(List)知识点总结
2019/02/18 Python
Python对列表的操作知识点详解
2019/08/20 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
仓库管理专业个人的自我评价
2013/12/30 职场文书
法制宣传口号
2014/06/16 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
英文慰问信
2015/02/14 职场文书
2015年酒店工作总结
2015/04/28 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
简爱读书笔记
2015/06/26 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
python解决12306登录验证码的实现
2021/04/18 Python