初衷:
上一篇原始类型中说到JS目前有七种数据类型,其中六种基本数据类型,一种复杂数据类型。这篇可以再具体一点。
内容:
1.区别:
-
基本数据类型
:- 就是将内容直接存储在栈内的简单数据段,数据大小确定,内存空间大小可以分配,按值访问,可以操作保存在变量中的实际的值;
- 基本数据类型的赋值就是复制;
- 使用
typeof
检测数据的类型。
-
复杂数据类型
:- 将内容存储在堆中的对象,每个空间大小不一样,要根据情况进行特定的配置,堆所对应的栈中记录的是指针(堆的地址),外部访问时先引出地址,再通过地址去找到值所存放的位置;
- 复杂数据类型的赋值是地址引用;
- 使用
instanceof
检测数据类型。
2.一些面试题
2.1.构造一个函数,给数组中的节点设置事件处理程序,当点击一个节点时,alert出节点的序号(这道题更多的出现在闭包知识上)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>点击btn弹出序号</title>
</head>
<body>
<button onclick="clickme()" class="btn">Click Me</button>
<button onclick="clickme()" class="btn">Click Me</button>
<button onclick="clickme()" class="btn">Click Me</button>
<button onclick="clickme()" class="btn">Click Me</button>
<button onclick="clickme()" class="btn">Click Me</button>
</body>
</html>
var nodes = document.getElementsByClassName("btn");
var click_handlers = function(nodes){
var i;
for (i = 0, l = nodes.length; i < l; i ++) {
nodes[i].onclick = function (e) {
alert(i);
}
}
};
click_handlers(nodes);
其实这道题目在关于闭包的知识点中,应该是特别熟悉的一道题。而我也承认,之前真的是似懂非懂,只知道上面写的,只能弹出最后一个节点的数字:5。现在重新回过头来看这道题的话,才知道这用值类型和引用类型来解释的话,会是如此简单明了。
内部函数在使用外部变量i的时候,用的是引用,而非复制。意思就是给每个节点设置onclick事件的时候,将i的引用传递给了alert,当再点击节点触发onclick的时候,i的值已经变成了nodes.lenght++,即5。
优化后:
var click_handlers = function(nodes){
var i;
var helper = function(i){
return function(){
alert(i);
}
}
for (i = 0, l = nodes.length; i < l; i ++) {
nodes[i].onclick = helper(i);
}
};
这里是因为传递进去的是i的值的复制。
2.2.看下面的
function function(person) {
person.age = 25;
person = {
name: "John",
age: 50
};
return person;
}
var p1 = {
name: "Alex",
age: 30
};
var p2 = function(p1);
console.log(p1); // -> ?{name: "Alex", age: 25}
console.log(p2); // -> ?{name: "John", age:50}
2.3.请写出下列输出:
var a = {"x": 1};
var b = a;
a.x = 2;
console.log(b.x);//2
a = {"x": 3};
console.log(b.x);//2
a.x = 4;
console.log(b.x);//2
a
和b
指向同一个地址,其中一个改变,另外一个也会跟着改变。故第一个b.x=2
;而当a = {"x":3}
后,a
被赋值了一个新的对象,地址也就变成了一个新的地址,于是与原来的就没什么关系了,a
、b
便变成了指向两个不同地址的对象:a
指向x=3
,b
指向x=2
。
2.4.请写出下列输出:
var a = {n:1};
var b = a;
a.x = a = {n:2};
console.log(a.x);//?
console.log(b.x);//?
关于js的赋值运算符
3.结语
多多看一些文章、书籍,理解理解,原来一切并没有想象中的那么难。今年开始,文章先发表在了掘金主页了哟,因此博客园就滞后点了~