JavaScript学习笔记（六）_ptc windchill系统点击确认按钮默认执行的js是啥-优快云博客

37、JavaScript 错误 - Throw 和 Try to Catch

try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

37.1 JavaScript try 和 catch

try 语句允许您定义一个代码块，以便在执行时检测错误。
catch 语句允许你定义一个要执行的代码块，如果 try 代码块中发生错误。
语法：

try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
}

示例：


  <body>
    <p id="demo"></p>
    <script>
      try {
        addd("hello");
      } catch (err) {
        document.getElementById("demo").innerHTML = err.message;
      }
    </script>
  </body>

输出：addd is not defined

37.2 throw 语句

throw 语句允许您创建自定义错误。
从技术上讲您能够抛出异常（抛出错误）。
异常可以是 JavaScript 字符串、数字、布尔或对象。
如果把 throw 与 try 和 catch 一同使用，就可以控制程序流并生成自定义错误消息。

<body>
    <input type="text" id="demo" />
    <button type="button" onclick="myFunction()">检测输入</button>
    <p id="intro"></p>
    <script>
      function myFunction() {
        var inputMess = document.getElementById("demo").value;
        try {
          //是否是数字
          if (isNaN(inputMess)) {
            throw "请输入数字";
          }
          if (inputMess == "") {
            throw "请输入内容";
          }
          if (Number(inputMess) < 5) {
            throw "太小";
          }
          if (Number(inputMess) > 10) {
            throw "太大";
          }
        } catch (err) {
          document.getElementById("intro").innerHTML = err;
        }
      }
    </script>
  </body>

37.3 finally 语句

finally 语句允许您在 try 和 catch 之后执行代码，无论结果。
语法：

try {
     // 供测试的代码块
}
 catch(err) {
     // 处理错误的代码块
} 
finally {
     // 无论结果如何都执行的代码块
}

37.5 Error 对象

Error 对象

38、JavaScript 作用域

局部作用域
全局作用域
JavaScript 作用域

39、JavaScript 严格模式

JavaScript 严格模式

40、JavaScript this 关键词

JavaScript this 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

40.1 方法中的 this

在对象方法中，this 指的是此方法的“拥有者”。
在本页最上面的例子中，this 指的是 person 对象。、、

<body>
    <p id="demo"></p>
    <script>
      var person = {
        firstName: "文",
        lastName: "阿花",
        age: "20",
        fullName: function () {
          return this.firstName + this.lastName;
        },
      };
      document.getElementById("demo").innerHTML = person.fullName();
    </script>
  </body>

输出：文阿花

40.2 单独的 this

在单独使用时，拥有者是全局对象，因此 this 指的是全局对象。

<body>

<p id="demo"></p>

<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>

输出：[object Window]

40.3 函数中的 this（默认）

在 JavaScript 函数中，函数的拥有者默认绑定 this。

<body>
    <p id="demo"></p>
    <script>
      function myFunction() {
        return this;
      }
      document.getElementById("demo").innerHTML = myFunction();
    </script>
  </body>

输出：[object Window]

40.4 事件处理程序中的 this

在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素

 <button onclick="this.style.display='none'">单击来删除我</button>

40.5 对象方法绑定

在此例中，this 是 person 对象（person 对象是该函数的“拥有者”）：

 <body>
    <p id="demo"></p>

    <script>
      // 创建对象：
      var person = {
        firstName: "Bill",
        lastName: "Gates",
        id: 678,
        myFunction: function () {
          return this;
        },
      };

      // 显示来自对象的数据：
      document.getElementById("demo").innerHTML = person.myFunction();
    </script>
  </body>

输出：[object Object]

40.6 显式函数绑定

call() 和 apply() 方法是预定义的 JavaScript 方法。
它们都可以用于将另一个对象作为参数调用对象方法。
您可以在本教程后面阅读有关 call() 和 apply() 的更多内容。

<body>
    <p id="demo"></p>

    <script>
      var person1 = {
        fullName: function () {
          return this.firstName + this.lastName;
        },
      };

      var person2 = {
        firstName: "文",
        lastName: "阿花",
      };

      document.getElementById("demo").innerHTML =
        person1.fullName.call(person2);
    </script>
  </body>

输出：文阿花

41、JavaScript 箭头函数

ES6 中引入了箭头函数。
箭头函数允许我们编写更短的函数
语法：

let myFunction = (a, b) => a * b;

示例一：

 <body>
    <p id="demo"></p>
    <script>
      let myFunction = (a, b) => a * b;
      document.getElementById("demo").innerHTML = myFunction(4, 5);
    </script>
  </body>

输出：20

示例二：

 <body>
    <p id="demo"></p>
    <script>
      var hello;
      hello = function () {
        return "Welcome China";
      };
      document.getElementById("demo").innerHTML = hello();
    </script>
  </body>

使用箭头函数后：

hello = () => {
  return "Welcome China";
};

42、JavaScript 类

请使用关键字 class 创建类。
请始终添加名为 constructor() 的方法：

语法：

class ClassName {
  constructor() { ... }
}

示例：

 <body>
    <script>
      class myDemo {
        constructor(name, yeasr) {
          this.name = name;
          this.yeasr = yeasr;
        }
      }
    </script>
  </body>

JavaScript 类不是对象。它只是 JavaScript 对象的模板。

42.1 使用类

下面的例子使用 myDemo类创建了两个 myDemo对象。

在创建新对象时会自动调用 constructor 方法。


  <body>
    <p id="demo"></p>
    <script>
      class myDemo {
        constructor(name, yeasr) {
          this.name = name;
          this.yeasr = yeasr;
        }
      }
      var myBoys = new myDemo("张三", "2024");
      document.getElementById("demo").innerHTML =
        myBoys.name + " " + myBoys.yeasr;
    </script>
  </body>

输出：张三 2024

42.2 Constructor 方法

构造方法是一种特殊的方法：

它必须拥有确切名称的“构造函数”
创建新对象时自动执行
用于初始化对象属性
如果未定义构造函数方法，JavaScript 会添加空的构造函数方法。

42.3 Class 方法

类方法的创建
语法：

与对象方法相同。

请使用关键字 class 创建类。

请始终添加 constructor() 方法。

然后添加任意数量的方法。

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

示例（1）：创建名为 “age” 的类方法，它返回车龄：

<body>
    <p id="demo"></p>
    <script>
      class myDemo {
        constructor(name, yeasr) {
          this.name = name;
          this.yeasr = yeasr;
        }

        age() {
          let date = new Date();
          //date.getFullYear()  返回当前年
          return date.getFullYear() - this.yeasr;
        }
      }
      var myBoys = new myDemo("张三", 2014);
      document.getElementById("demo").innerHTML = "年纪为：" + myBoys.age();
    </script>
  </body>

输出：年纪为：10

示例（2）：您可以向类方法发送参数：

 <body>
    <p id="demo"></p>
    <script>
      class myDemo {
        constructor(name, yeasr) {
          this.name = name;
          this.yeasr = yeasr;
        }

        age(x) {
          return x - this.yeasr;
        }
      }
      let date = new Date();
      //date.getFullYear()  返回当前年
      let year = date.getFullYear();
      var myBoys = new myDemo("张三", 2014);
      document.getElementById("demo").innerHTML = "年纪为：" + myBoys.age(year);
    </script>
  </body>

输出：年纪为：10

43 、JavaScript 模块（待补充）

43.1 模块（Modules）

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
JavaScript 模块允许您将代码分解成单独的文件。这会使维护代码库更加容易。
模块是使用 import 语句从外部文件导入的。模块还依赖于 <script> 标签中的 type="module"。

43.2 export 命令

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

JavaScript 模块

44、补充

JavaScript JSON
JavaScript 调试
 JavaScript 样式指南
 JavaScript 最佳实践

JavaScript 常见错误
 JavaScript 性能

45、对象（知识补充）

45.1 JavaScript 对象访问器

ECMAScript 5 (2009) 引入了 Getter 和 Setter。
Getter 和 Setter 允许您定义对象访问器（被计算的属性）。

45.1.1 JavaScript Getter（get 关键词）

示例：本例使用 lang 属性来获取 age属性的值：

 <body>
    <p id="demo"></p>
    <script>
      var perdson = {
        firstName: "文",
        lastName: "阿花",
        age: 25,

        get lang() {
          return this.age;
        },
      };

      document.getElementById("demo").innerHTML = perdson.lang;
    </script>
  </body>

输出：25

45.1.2 JavaScript Setter（set 关键词）

示例：本例使用 lang 属性来设置 language 属性的值：

 <body>
    <p id="demo"></p>
    <script>
      var perdson = {
        firstName: "文",
        lastName: "阿花",
        age: "",

        set lang(lang) {
          return (this.age = lang);
        },
      };
      perdson.lang = "25";

      document.getElementById("demo").innerHTML = perdson.age;
    </script>
  </body>

输出：25

45.2 JavaScript 函数还是 Getter？

下面两个例子的区别在哪里？

 <body>
    <p id="demo"></p>
    <script>
      var perdson = {
        firstName: "文",
        lastName: "阿花",
        fullName: function () {
          return this.firstName + this.lastName;
        },
      };

      document.getElementById("demo").innerHTML = perdson.fullName();
    </script>
  </body>

  <body>
    <p id="demo"></p>
    <script>
      var perdson = {
        firstName: "文",
        lastName: "阿花",
        // fullName: function () {
        //   return this.firstName + this.lastName;
        // },
        get fullName() {
          return this.firstName + this.lastName;
        },
      };

      document.getElementById("demo").innerHTML = perdson.fullName;
    </script>
  </body>

例子 1 以函数形式访问 fullName：person.fullName()。

例子 2 以属性形式访问 fullName：person.fullName。

第二个例子提供了更简洁的语法。

45.3 为什么使用 Getter 和 Setter？

它提供了更简洁的语法
它允许属性和方法的语法相同
它可以确保更好的数据质量
有利于后台工作

45.4 JavaScript 对象构造器

示例：

<body>
    <p id="demo"></p>
    <script>
      //创建 Person 对象的构造器函数
      function Person(first, last, age) {
        this.firstName = first;
        this.lastName = last;
        this.old = age;
      }

      //创建Person 对象
      var myPerson = new Person("文", "阿花", 25);

      document.getElementById("demo").innerHTML =
        "姓名：" +
        myPerson.firstName +
        myPerson.lastName +
        "<br>年龄：" +
        myPerson.old;
    </script>
  </body>

输出：
姓名：文阿花
年龄：25

45.5 为对象添加属性

示例：为Person对象添加birthday 属性：

<body>
    <p id="demo"></p>
    <script>
      //创建 Person 对象的构造器函数
      function Person(first, last, age) {
        this.firstName = first;
        this.lastName = last;
        this.old = age;
      }

      //创建Person 对象
      var myPerson = new Person("文", "阿花", 25);

      //为对象添加属性
      myPerson.birthday = "2020-04-21";

      document.getElementById("demo").innerHTML =
        "姓名：" +
        myPerson.firstName +
        myPerson.lastName +
        "<br>年龄：" +
        myPerson.old +
        "<br>生日：" +
        myPerson.birthday;
    </script>
  </body>

输出：姓名：文阿花
年龄：25
生日：2020-04-21

45.6 为对象添加方法

示例：添加获取完整姓名的方法：

  <body>
    <p id="demo"></p>
    <script>
      //创建 Person 对象的构造器函数
      function Person(first, last, age) {
        this.firstName = first;
        this.lastName = last;
        this.old = age;
      }

      //创建Person 对象
      var myPerson = new Person("文", "阿花", 25);

      //为对象添加属性
      myPerson.birthday = "2020-04-21";

      //为对象添加方法
      myPerson.fullName = function () {
        return this.firstName + this.lastName;
      };

      document.getElementById("demo").innerHTML =
        "姓名：" +
        myPerson.fullName() +
        "<br>年龄：" +
        myPerson.old +
        "<br>生日：" +
        myPerson.birthday;
    </script>
  </body>

输出：姓名：文阿花
年龄：25
生日：2020-04-21

45.7 构造器添加属性

与向已有对象添加新属性不同，您无法为对象构造器添加新属性
示例：

  <body>
    <p id="demo"></p>
    <script>
      //创建 Person 对象的构造器函数
      function Person(first, last, age) {
        this.firstName = first;
        this.lastName = last;
        this.old = age;
      }

      //尝试为构造器添加属性
      Person.birthday = "2020-04-21";

      //创建Person 对象
      var myPerson = new Person("文", "阿花", 25);

      document.getElementById("demo").innerHTML ="生日：" + myPerson.birthday;
    </script>
  </body>

输出：生日：undefined

如需向构造器添加一个新属性，您必须添加到构造器函数：

 <body>
    <p id="demo"></p>
    <script>
      //创建 Person 对象的构造器函数
      function Person(first, last, age) {
        this.firstName = first;
        this.lastName = last;
        this.old = age;
        //添加属性
        this.birthday = "2020-04-21";
      }

      //创建Person 对象
      var myPerson = new Person("文", "阿花", 25);

      document.getElementById("demo").innerHTML =
        myPerson.old + "<br>生日：" + myPerson.birthday;
    </script>
  </body>

输出：25
生日：2020-04-21

JavaScript prototype 属性允许您为对象构造器添加新属性：

<body>
    <p id="demo"></p>
    <script>
      //创建 Person 对象的构造器函数
      function Person(first, last, age) {
        this.firstName = first;
        this.lastName = last;
        this.old = age;
      }

      //创建Person 对象
      var myPerson = new Person("文", "阿花", 25);

      //使用JavaScript prototype 属性允许您为对象构造器添加新属性：
      Person.prototype.birthday = "2000-09-18";

      document.getElementById("demo").innerHTML =
        myPerson.firstName +
        myPerson.lastName +
        "<br>生日：" +
        myPerson.birthday;
    </script>
  </body>

输出：
文阿花
生日：2000-09-18

45.8 为构造器添加方法

与向已有对象添加新方法不同，您无法为对象构造器添加新方法。
必须在构造器函数内部向一个对象添加方法：

  <body>
    <p id="demo"></p>
    <script>
      //创建 Person 对象的构造器函数
      function Person(first, last, age) {
        this.firstName = first;
        this.lastName = last;
        this.old = age;
        //添加属性
        this.birthday = "2020-04-21";
        //添加方法
        this.fullName = function () {
          return this.firstName + this.lastName;
        };
      }

      //创建Person 对象
      var myPerson = new Person("文", "阿花", 25);

      document.getElementById("demo").innerHTML =
        myPerson.fullName() + "<br>生日：" + myPerson.birthday;
    </script>
  </body>

输出：文阿花
生日：2020-04-21

JavaScript prototype 属性也允许您为对象构造器添加新方法：

<body>
    <p id="demo"></p>
    <script>
      //创建 Person 对象的构造器函数
      function Person(first, last, age) {
        this.firstName = first;
        this.lastName = last;
        this.old = age;
      }

      //创建Person 对象
      var myPerson = new Person("文", "阿花", 25);

      //使用JavaScript prototype 属性允许您为对象构造器添加新属性：
      Person.prototype.birthday = "2000-09-18";

      //JavaScript prototype 属性也允许您为对象构造器添加新方法：
      Person.prototype.fullName = function () {
        return this.firstName + this.lastName;
      };

      document.getElementById("demo").innerHTML =
        myPerson.fullName() + "<br>生日：" + myPerson.birthday;
    </script>
  </body>

输出：文阿花
生日：2000-09-18

修改方法对应的值：

<body>
    <p id="demo"></p>
    <script>
      //创建 Person 对象的构造器函数
      function Person(first, last, age) {
        this.firstName = first;
        this.lastName = last;
        this.old = age;
        //添加属性
        this.birthday = "2020-04-21";
        //添加方法
        this.changeName = function (name) {
          this.lastName = name;
        };
      }

      //创建Person 对象
      var myPerson = new Person("文", "阿花", 25);

      //修改方法的值
      myPerson.changeName("哈哈");

      document.getElementById("demo").innerHTML =
        myPerson.firstName +
        myPerson.lastName +
        "<br>生日：" +
        myPerson.birthday;
    </script>
  </body>