解析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不同页面传值的改进版
Sep 30 Javascript
javascript URL锚点取值方法
Feb 25 Javascript
Javascript Object.extend
May 18 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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语法速查表
2007/01/02 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
2014年大班元旦活动方案
2014/02/26 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
六一儿童节开幕词
2015/01/29 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android