解析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 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
js精确的加减乘除实例
Nov 14 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
vuex分模块后,实现获取state的值
Jul 26 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数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
python程序文件扩展名知识点详解
2020/02/27 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
python打包多类型文件的操作方法
2020/09/21 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
查摆问题整改措施
2014/10/24 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python