JavaScript高级程序设计chapter 4

news/2024/7/19 14:36:46 标签: js, javascript, vue.js, html, node.js

JavaScript chapter 4

  • 理解基本类型和引用类型的值
  • 理解执行环境
  • 理解垃圾收集

4.1 基本类型和引用类型的值

  • JavaScript中有两种不同类型的值:基本类型值和引用类型值

  • 基本数据类型是按值访问,引用类型的值是保存在内存中的对象

  • 在操作对象是,实际上是在操作对象的引用而不是实际的对象

  • JavaScript中string类型的数值不是引用类型的

  • 引用类型和基本类型的定义是类似的,创建一个变量并为该变量赋值

  • 但是对不同类型可以执行的操作则大相径庭,我们可以对引用类型的值添加方法和属性

    var person = new Object(); //创建一个引用类型的数值
    person.name = "ssssss"; // 为数值类型的数值添加属性
    alert(person.name); // 输出"sssss"
    
  • 但是我们不能为一个基本类型添加属性,虽然这样不会报错

    var name = "ssss"; // 创建了一个String类型的变量
    name.age = 10; // 为一个基本类型添加一个属性
    alert(name.age); // undefined
    
  • 除了操作不同外,引用类型和基本类型复制变量的方法也不同

    var num1 = 5;
    var num2 = num1;
    alert(num2); // 输出5
    num2 = 6;
    alert(num1); // 输出5
    alert(num2); // 输出6
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kQMJus1b-1611734137265)(C:\Users\Libaisonm\AppData\Roaming\Typora\typora-user-images\image-20210127121545830.png)]

  • 两个变量在内存中有自己独立的空间,不会互相影响

  • 而对于引用类型变量来说,复制变量会复制他们的指针,他们会指向同一个对象

    html" title=javascript>javascript">var obj1 = new Object();
    var obj2 = obj1;
    obj1.name = "ssss";
    alert(obj2.name); // "ssss"
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G8mB5jtG-1611734137269)(C:\Users\Libaisonm\AppData\Roaming\Typora\typora-user-images\image-20210127121939351.png)]

  • 他们是内存中同一个对象的映射,所以会互相影响

  • 传递参数

    • JavaScript中所有的参数都是按值传递的

    • 基本数据类型的传递规则如下

      html" title=javascript>javascript">function addTem(num){ // 复制变量
      	num += 10;
      	return num;
      }
      var num = 10;
      var res = add(10);
      alert(num); // 输出10,没有变化
      alert(res); //输出20
      
    • 引用类型的传递规如下

      html" title=javascript>javascript">function setName(obj){
      	obj.name = "ssss";
      }
      var person = new Object();
      setName(person);
      alert(person.name); // "ssss"
      
    • 对象也是按值传递的

      html" title=javascript>javascript">function setName(obj){
      	obj.name = "ssss";
      	obj = new Object(); // 这里改变了对象的指向
      	obj.name = "aaaa";
      }
      var person = new Object();
      setName(person);
      alert(person.name); // 输出"ssss"
      
    • 可以把JavaScript函数的参数想象成为局部变量

  • 类型检测

    • 用typeof检测null和引用类型对象都会返回object

    • 在检测引用类型的值时,当我们需要检测它是什么类型的对象时,可以使用instanceof

      html" title=javascript>javascript">result = variable instanceof constructor // 使用格式 会返回一个Boolean类型的值
      
      alert(person instanceof Object); // person是Object吗
      alert(colors instanceof Array);  // colors是Array吗
      alert(pattern instanceiof RegExp);  // pattern是RegExp吗
      // 根据规定,所有引用类型都是Object,使用instanceof都会返回true
      

4.2 执行环境和作用域

  • 每一个执行环境都对应一个变量对象,在环境中定义的使用变量和函数都会保存在这个对象中我们无法访问这个对象,但是解析器在后台会使用它

  • 全局执行环境是最外围的一个执行环境,在web浏览器中,全局执行环境被认为是window对象

  • 当这个环境对象中的代码执行完毕后,这个环境对象也会被销毁。全局执行环境直到网页被关闭后才会被销毁

  • 每个函数都会有自己的执行环境,后台用堆栈实现

  • 当代码在一个环境中执行时,会创建变量对象的一个作用链,对执行环境有权访问的所有变量和函数的有序访问

  • 作用链的最前端时当前环境对象,最末段是全局对象。在访问变量或者函数是,会一层层的去查询。找不到会报错

    
    var color = "bule";
    function changeColor(){
    	if(color == "blue"){
    		color = "red";
    	}else color = "blue";
    }
    changeColor();
    
    alertColor();
    alert("Color is now" + color); 
    // 该程序中访问color时的作用链有两个元素,函数自己的变量对象(包含arguments对象)和全局变量对象。color在全局变量中找到
    
  • 局部作用域定义的变量可以在基本环境与全局变量互换使用

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CgPzCXOd-1611734137271)(C:\Users\Libaisonm\AppData\Roaming\Typora\typora-user-images\image-20210127131019565.png)]

  • 以上程序的作用链如下图

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mErprtet-1611734137275)(C:\Users\Libaisonm\AppData\Roaming\Typora\typora-user-images\image-20210127131059632.png)]

  • 内部环境可以通过作用链访问所有的外部环境。但是外部环境不能访问内部环境的任何变量和函数。这些环境的联系是线性的,有次序的

  • 延长作用链:有一些语句可以在作用链前端添加一个变量对象,这个变量是临时的

    • try-catch语句和catch块
    • with语句
  • 没有块级作用域

    • JavaScript没有块级作用域

      html" title=javascript>javascript">if(true){
      	var color = "blue"; // 这个变量被定义在了全局环境中
      }
      alert(color); // "blue"
      
      for(var i = 0;i < 10;i++){ // 这个i是定义在全局环境中的
      	doSomething(i);
      }
      alert(i); // 10
      
  • 声明变量

    • var声明的变量会被自动添加到最接近的环境中,在with语句中最接近的环境就是函数环境

      如果一个变量没有用var声明,那么该变量贵被添加到全局变量中

    • 在JavaScript中不推荐不声明变量就直接使用,在严格模式下这样的操作会直接报错

  • 查询标识符

    html" title=javascript>javascript">var color = "blue";
    function getcolor(){
    	return color;
    }
    
    

4.3 垃圾收集

  • Javascript有自动垃圾收集机制,垃圾收集器会安装固定时间间隔周期性的执行这一操作。
  • 使用标记来标记无用的变量,具体实现一共有两种方法
    • 标记清除:这是JavaScript中最常用的方式
    • 引用计数:追踪每一个变量使用的次数
  • 性能问题:不推荐自己调用垃圾回收
  • 内存管理:
    • 分配给web浏览器的的内存一般比桌面应用的更多,这是出于安全性的考虑
    • 解除引用不意味着马上回收,解除引用的真正作用是为了让值脱离执行环境

安装固定时间间隔周期性的执行这一操作。

  • 使用标记来标记无用的变量,具体实现一共有两种方法
    • 标记清除:这是JavaScript中最常用的方式
    • 引用计数:追踪每一个变量使用的次数
  • 性能问题:不推荐自己调用垃圾回收
  • 内存管理:
    • 分配给web浏览器的的内存一般比桌面应用的更多,这是出于安全性的考虑
    • 解除引用不意味着马上回收,解除引用的真正作用是为了让值脱离执行环境

http://www.niftyadmin.cn/n/1768699.html

相关文章

HTML5框架、背景和实体

-----------------siwuxie095 HTML5 框架 1、框架标签<frame> 框架对于页面的设计有着很大的作用 2、框架集标签<frameset> <frameset> 定义如何将窗口分割为框架&#xff0c;即用于包含 <frame> 每一个 <frameset> 定义一系列行或列 rows/cols…

pymysql的模板

获取数据 import pymysqconn pymysql.connect(hostlocalhost, userroot, passwd, dbstudy)cur conn.cursor()cur.execute("SELECT * FROM class")rows cur.fetchall()cur.close()conn.close()return render(request,index.html,{msg:rows})添加数据 import pymysq…

XHTML的规范化

-------------------siwuxie095 XHTML 简介 1、什么是XHTML&#xff1f; XHTML 指的是可扩展超文本标记语言 XHTML 与 HTML 4.01 几乎是相同的 XHTML 是更严格更纯净的 HTML 版本 XHTML 是以 XML 应用的方式定义的 HTML XHTML 得到所有主流浏览器的支持 2、为什么使用 XHTML&am…

HTML5新增的主体结构元素

-----------------------siwuxie095 HTML5 新增的主体结构元素 1、article 元素 article 元素代表文档、页面 或 应用程序中独立的、完整的、可以 独自被外部引用的内容 它可以是一篇博客、一篇论坛帖子、一段用户评论或独立的插件。 总之&#xff0c;它可以是任何独立的内容…

JDBC的基本操作

Class.forName("com.mysql.cj.jdbc.Driver"); // 反射加载相对应的驱动类String url "jdbc:mysql://localhost:3306/bzbh"; // 反应sql的urlString username "root";String password "Aa010326.";// 连接成功&#xff0c;数据库对象…

HTML5表单新增属性

------------------siwuxie095 HTML5 表单新增元素与属性 1、form 属性 在HTML4 中&#xff0c;表单内的从属元素必须书写在表单内部&#xff0c;而 在 HTML5 中&#xff0c;可以把它们书写在页面上任何地方&#xff0c;然后为 该元素指定一个form 属性&#xff0c;属性值为该…

Web内容回顾

-----------------siwuxie095 Java EE 三层结构 1、Web 层&#xff1a;Struts2 框架 2、Service 层&#xff1a;Spring 框架 3、DAO 层&#xff1a;Hibernate 框架 &#xff08;1&#xff09;对数据库进行CRUD 操作&#xff0c;即 增删改查 Operation SQL Create INSERT Re…

Hibernate概述

-------------------siwuxie095 什么是框架 对应到软件工程中&#xff0c;即 在写一个程序时&#xff0c;框架可以帮助我们实现 一部分功能&#xff0c;使之最后可以少写一部分代码就能实现全部功能 什么是 Hibernate 框架 1、Hibernate 框架是应用在 Java EE 三层架构中的 DA…