js中值类型与引用类型

js中值类型与引用类型

1.概述
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.值类型与引用类型赋值特征
js中值类型与引用类型_第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>
    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.值类型与引用类型参数传递
js中值类型与引用类型_第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 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>

你可能感兴趣的:(#,JavaScript笔记,javascript)