js中值类型与引用类型
js中值类型与引用类型
1.概述
2.值类型与引用类型内存分布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 简单类型： number string boolean undefined null
// 复杂类型： function array object 所有自己定义的 Teacher Student
// 从内存存储的角度来分
// 值类型： 简单类型
/// 引用类型： 复杂类型
// 内存：可以重复利用 定义的变量 数据都是存储在内存中
// 简单类型在内存中存储的时候，存储的是值本身， 所以简单类型也叫值类型
// 栈 堆 （java ）
var num = 10;
var str = 'abc';
var flag = true;
// new Object()
var obj = {
name: 'zs',
age: 18
}
/*
值类型： 简单类型， 因为变量在存储简单类型的时候，直接存储的就是值本身
引用类型： 复杂类型，复杂类型自己会在内存中存储，变量存放的仅仅是这个复杂类型的地址。
*/
</script>
</body>
</html>
3.值类型与引用类型赋值特征
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var num1 = 11;
var num2 = num1;
console.log(num1); // 11
console.log(num2); // 11
num2 = 22;
console.log(num1); // 11
console.log(num2); // 22
var obj1 = {
name: 'zs',
age: 18
}
var obj2 = obj1
obj2.name = 'ls'
console.log(obj1.name)
console.log(obj2.name)
/*
1. 值类型 var num = 11 var num1 = num
var num = 11 表示直接num存储的就是11这个值
var num1 = num 表示直接把11这个值赋值给num1 最终结果num和num1都存储11
2. 引用类型 var obj = {name: 'zs'} var obj1 = obj
var obj = {name: 'zs'} 表示 obj存储的仅仅是对象的地址
var obj1 = obj 表示 把obj存储的地址赋值一份给obj1 obj和obj1都存储了地址
都指向同一个对象，。 特点： obj或者obj1都可以改变这个对象
*/
</script>
</body>
</html>
4.值类型与引用类型参数传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// var num = 10;
// function fn(a) {
// a = 99;
// console.log(a);//99
// }
// fn(num);
// console.log(num);//10
var obj = {
name:"zs",
age:18
}
function fn(a) {
a.name = "ls";
console.log(a.name); // ls
}
fn(obj);
console.log(obj.name); // ls zs
</script>
</body>
</html>
5.面试题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// function fn(a, b) {
// a = a + 1;
// b = b + 1;
// console.log(a);//11
// console.log(b);//21
// }
// var x = 10;
// var y = 20;
// fn(x, y);
// console.log(x);//10
// console.log(y);//20
// var p = {
// name:"zs",
// age:18
// }
// function fn(person) {
// person.name = 'ls';
// console.log(person.name);
// }
// fn(p);
// console.log(p.name);
// function Person(name, age, salary) {
// this.name = name;
// this.age = age;
// this.salary = salary;
// }
// function f1(person) {
// person.name = "ls";
// console.log(person.name); // ls
// }
// var p = new Person("zs", 18, 1000);//创建一个新对象
// console.log(p.name);// zs
// f1(p);
// console.log(p.name);// ls
// zs zs ls
// zs zs zs
function Person(name, age, salary) {
this.name = name;
this.age = age;
this.salary = salary;
}
function f1(person) {
person.name = "ls";
person = {
name : 'zs'
}
console.log(person.name); // zs
}
var p = new Person("zs", 18, 1000);//创建一个新对象
console.log(p.name);// zs
f1(p);
console.log(p.name); // ls
</script>
</body>
</html>
6.值类型与引用类型练习
//面试题1 :
// a -> x
function fn(a, b) {
// 相当于
// var a = 10;
// var b = 20;
// 函数的参数 其实就是函数内部的局部变量
a = a + 1;
b = b + 1;
console.log(a);
console.log(b);
}
var x = 10;
var y = 20;
fn(x, y);
console.log(x);
console.log(y);
//面试题2 :
var p = {
name:"zs",
age:18
}
function fn(person) {
person.name = 'ls';
console.log(person.name);
}
fn(p);
console.log(p.name);
//面试题3
function Person(name, age, salary) {
this.name = name;
this.age = age;
this.salary = salary;
}
function f1(person) {
person.name = "ls";
console.log(person.name);
}
var p = new Person("zs", 18, 1000);//创建一个新对象
console.log(p.name);//
f1(p);
console.log(p.name);//
//面试题4
function Person(name, age, salary) {
this.name = name;
this.age = age;
this.salary = salary;
}
function f1(person) {
person.name = "ls";
person = {
name : 'zs'
}
console.log(person.name);
}
var p = new Person("zs", 18, 1000);//创建一个新对象
console.log(p.name);//
f1(p);
console.log(p.name);
结论：简单类型存储的是值本身，复杂类型存储的是地址，引入如果把第一个对象赋值给另一个变量，此时两个变量会指向同一个对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// var obj1 = {
// name: 'zs',
// age: 18
// }
// var obj2 = obj1
// obj2.name = 'ls'
// obj2 = {
// name: 'ww'
// }
// console.log(obj1.name) // ls
// console.log(obj2.name) // ww
// function fn(arr) {
// arr[0] = 100
// }
// var a = [1, 2, 3]
// fn(a);
// console.log(a);
// 回顾一下： 封装了一个函数，对数组实现冒泡排序
// 有没有必要返回这个arr
function sort(arr) {
for(var i = 0; i < arr.length -1; i++) {
for(var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j+1]) {
var temp =arr[j]
arr[j] = arr[j+1]
arr[j+1] = temp
}
}
}
// return arr
}
var a = [5,2,3]
sort(a)
console.log(a);
/*
js中的数据类型清晰的划分
值类型： 简单类型，
number string boolean undefined null
引用类型： 复杂类型
function object array 自定义的对象
*/
</script>
</body>
</html>