解析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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
js Dialog 实践分享
Oct 22 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
深入理解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 SQL Injection with MySQL
2011/02/27 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP实现递归的三种方法
2020/07/04 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
Python global全局变量函数详解
2018/09/18 Python
python重要函数eval多种用法解析
2020/01/14 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
python之随机数函数的实现示例
2020/12/30 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
写自荐信要注意什么
2013/12/26 职场文书
《童年》教学反思
2014/02/18 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
党支部对转正的意见
2015/06/02 职场文书
网络研修随笔感言
2015/11/18 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python