解析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实现根据出生年月计算年龄
Jan 10 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
深入理解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
将数组写入txt文件 var_export
2009/04/21 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
javascript的事件描述
2006/09/08 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python Shapely使用指南详解
2020/02/18 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
python 写一个性能测试工具(一)
2020/10/24 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
总经理文秘岗位职责
2014/02/03 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书