解析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中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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中PDO基础教程 入门级
2011/09/04 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python实现控制COM口的示例
2019/07/03 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
网页设计个人找工作求职信
2013/11/28 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
以权谋私检举信范文
2015/03/02 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
小平小道观后感
2015/06/09 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python