解析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 相关文章推荐
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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使用Redis实现Session共享的实现示例
2019/05/12 PHP
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python API自动化框架总结
2019/11/12 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
几个数据库方面的面试题
2016/07/01 面试题
个人求职信范文分享
2013/12/13 职场文书
会计专业自我鉴定
2014/02/10 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
会计系毕业生求职信
2014/05/28 职场文书
护理专科学生自荐书
2014/07/05 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
西岭雪山导游词
2015/02/06 职场文书
撤诉书怎么写
2015/05/19 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python