从变量看javaScript

一、从存储看变量

在js中,变量按存储方式来说,有两种类型,一是值类型,二是引用类型。

先说值类型,在js中,值类型有Number、String、 Boolean、undefined、null。那么在内存中,值类型存储的就是这些基本数据变量的值,如果我们要对这些变量进行复制,那么我们需要一块新的内存空间来存放复制的值。
那引用类型又是什么呢,引用类型在js中有对象、函数、数组,作为引用类型,他们都可以无限的扩展属性,那么当一个引用类型扩展的属性非常多的时候,我们进行复制是不是就要拿出一块相应的空间去存放,那占得内存就会非常大了,所以引用类型存放的只是一个引用也就是一个指针,指向在堆中真正的数据。
在这里举一个可能不是很恰当的例子,我们把房子作为内存空间,声明的变量就是房子里的东西,值类型是什么呢?我看了你这个房间,我也很想要,于是乎我就新建了一个房子,然后把其中的东西原封不动的复制一份搬到我的房子里,这就是值类型复制的特性。下面看代码例子:

1 var home = "精装修房子";  // 创建一个字符串类型的值
2 var newHome = home;     // 我也拥有了一栋一模一样的房子
3 newHome = "别墅";          // 现在我把房子盖成了别墅
4 console.log(home);           // "精装修房子",是互不影响的

值类型

那么引用类型是什么呢,就是我很喜欢你这个房子,那你就把钥匙配给我一把,我也可以使用这个房子,但是我对这个房子的使用情况也会影响到你的使用,我往里面填了一个电视,那么你用的时候电视是在里面的了。下面看代码:

 1 //  一个新房子
 2 var home = {
 3     name: "居客";
 4     bed: "木板床"
 5 };
 6 // 我很喜欢,给我一把钥匙
 7 var me = home;
 8 // 修改房子,买一个电视
 9 me.TV = "长虹";
10 console.log(home);

引用类型

二、typeof和instanceof

在面试的时候我们会经常的遇到一个这样的问题,typeof的返回值有什么,或者是说直接给你一个语句问你返回值是什么。

那么typeof的返回值究竟有哪些呢?

 1 typeof undefined;  // undefined
 2 typeof 18;  //number
 3 typeof "juke";  //string
 4 typeof null; //object
 5 typeof {}; //object
 6 typeof []; //object
 7 typeof function(){}; //function
 8
 9 // 其实还有一种在ES6中定义的基本类型Symbol,这里不多介绍
10 typeof Symbol();  //symbol

typeof

可以看到,我们使用typeof对于引用类型来说,只能够分辨出function,但是对数组、对象来说,typeof十分不出来的。

那么instanceof就能够派上用场了,它可以判断一个函数是不是一个变量的构造函数。

1 var arr = [];
2 arr instanceof Array;  //true

现在看来是能够检测是不是数组了,但是在一些特别的环境下,我们要使用ES5中的新特性去检测数组。

1 var arr = [];
2 Array.isArray(arr); //true

但是这个属性在浏览器中有比较大的限制,只有IE9+、Chrome、Firefox4+、Safari5+、opera10.5+的浏览器才会支持,那么还有没有更稳妥的方式去检测数组呢,当然有,数组也是对象,我们可以通过,object的toString方法来判断。

1 var arr = [];
2 function isArray(arr) {
3        return Object.prototype.toString.call(arr) == ‘[object Array]‘;
4 }
5
6 isArray(arr);  // true

同理我们可以对原生函数以及正则来进行检测。

三、变量的强制类型转换

在js中我们常常会遇到的强制类型转换有下面几种:

  • 逻辑运算符
  • 在if语句中的类型转换
  • 当使用==的时候进行转换
  • 在进行字符串拼接的时候
  • 以及使用parseInt()、Number()等方法的时候
时间: 2024-10-12 23:02:09

从变量看javaScript的相关文章

[从jQuery看JavaScript]-变量与作用域链

jQuery片段: [javascript] view plaincopy var // Will speed up references to window, and allows munging its name. window = this, // Will speed up references to undefined, and allows munging its name. undefined, // Map over jQuery in case of overwrite _jQ

从面向对象看JavaScript(一)

前言 JavaScript作为一种脚本语言,语法简单(求其),易上手,适合开发:同时,作为当今前端编程方面占据垄断地位,甚至逐步向后端发展的强势语言,它的前景十分美好,功能足够强大.既然是脚本语言,自然没有c,c++,Java等传统语言的严谨,但是利用它仍然可以基本覆盖其他语言能做到的高级功能. 下面我就从面向对象的角度,整合JavaScript里函数,对象,引用类型,原型,闭包,作用域链等知识点,去探讨JavaScript是如何定义对象,构造类,设置属性和函数的私有公有权限,实现继承,利用作用

再看javascript执行上下文、变量对象

突然看到一篇远在2010年的老文,作者以章节的形式向我们介绍了ECMA-262-3的部分内容,主要涉及到执行上下文.变量对象.作用域.this等语言细节.内容短小而精悍,文风直白而严谨,读完有酣畅淋漓.醍醐灌顶之感,强烈推荐!!! 原文链接:这里 本想翻译成文,原来早已有人做了,这里.真生不逢时,何其遗憾啊! 做个笔记,聊慰我心. 执行上下文 ExecutionContext 每当控制器(control)转换到ECMAScript可执行代码时,都会创建并进入到一个可执行上下文. 一段简短的句子,

从function的定义看JavaScript的预加载

在JavaScript中定义一个函数,有两种写法: function ftn(){} // 第一种 var ftn = function(){} // 第二种 有人说,这两种写法是完全等价的.但是在解析前,前一种写法会被解析器自动提升到代码的头部,因此违背了函数先定义后使用的原则,所以建议定义函数时候,全部采用后一种写法.缙云县外国专家局 看完这句话,我第一个感觉是两个在使用时候是完全一致的,只是解析上有所差异.但是他的解释“前一种写法会被解析器自动提升到代码的头部”让我很困惑. 如是我有了下面

[从jQuery看JavaScript]-匿名函数与闭包(Anonymous Function and Closure)

jQuery片段: [javascript] view plaincopyprint? (function(){ //这里忽略jQuery所有实现 })(); (function(){//这里忽略jQuery所有实现})(); 半年前初次接触jQuery的时候,我也像其他人一样很兴奋地想看看源码是什么样的.然而,在看到源码的第一眼,我就迷糊了.为什么只有一个匿名函数又没看到运行(当然是运行了……),就能有jQuery这么个函数库了?于是,我抱着疑问来到CSDN.结果相信现在很多人都很清楚了(因为

[从jQuery看JavaScript]-匿名函数与闭包

jQuery片段: [javascript] view plaincopy (function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也像其他人一样很兴奋地想看看源码是什么样的.然而,在看到源码的第一眼,我就迷糊了.为什么只有一个匿名函数又没看到运行(当然是运行了……),就能有jQuery这么个函数库了?于是,我抱着疑问来到CSDN.结果相信现在很多人都很清楚了(因为在我之后也不乏来者,呵呵~).当一个匿名函数被括起来,然后再在后面加一个括号,这

[smarty] 在smarty模板中使用smarty变量初始化 javascript 变量的问题

// 总结:// 1/ 在smarty 模板文件中,使用从php中assign过来的smarty变量,一定需要使用双引号或单引号来括住smarty变量,如:var title="<!--{$title}-->";// 2/ 如果不使用引号括住,在smarty变量值为字符串的情况下,那么该字符串在javascript中会被作为javascript变量来解释,所以就会产生错误.// 3/ 变量值是数字,那么则不会产生错误// tpl 文件 <script> if(n

再看JavaScript线程

继上篇讨论了一些关于JavaScript线程的知识,我们不妨回过头再看看,是不是JavaScript就不能多线程呢?看下面一段很简单的代码(演示用,没考虑兼容问题): 代码判断一: <div id="div"> click me </div> <script> var div=document.getElementById("div"); div.addEventListener('click',function(){ alert

关于帝国标签变量带入javascript中出现的问题

今天在用帝国套模板遇到了问题,帝国标签是写在js里面的, <script language="JavaScript"> [!--empirenews.listtemp--]        var div = document.createElement("div");                div.className = "mode popup_in";div.innerHTML = "<!--list.var