解析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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
vue mounted组件的使用
Jun 18 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
浅析Python数据处理
2018/05/02 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
基于python实现KNN分类算法
2020/04/23 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
积极贯彻学习两会精神总结
2014/03/17 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
确保工程质量承诺书
2015/04/29 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
专项资金申请报告
2015/05/15 职场文书
婚礼家长致辞
2015/07/27 职场文书