解析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 focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
JSONP基础知识详解
Mar 19 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 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笔记之:数据类型与常量的使用分析
2013/05/14 PHP
基于php无限分类的深入理解
2013/06/02 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
javascript优先加载笔记代码
2008/09/30 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
python格式化字符串实例总结
2014/09/28 Python
python中的随机函数小结
2018/01/27 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
python打包成so文件过程解析
2019/09/28 Python
django实现后台显示媒体文件
2020/04/07 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
电子信息专业学生自荐信
2013/11/09 职场文书
档案管理员岗位职责
2013/12/01 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
学前教育专业求职信
2014/09/02 职场文书
学生检讨书怎么写
2014/10/09 职场文书