当前位置：首页 > news >正文

Web基础关键_008_JavaScript 的 BOM、ES6、构造函数、原型

news 2025/7/5 8:26:41

目录

一、BOM

1.概述

2.Window 对象

（1）Location 对象

（2）History 对象

二、ES6

1.let 关键字

2.const 关键字

三、构造函数创建对象

四、原型

1.说明

2.继承和继承链

一、BOM

1.概述

Browser Object Model，浏览器对象模型；
允许 JS 与浏览器对话；
不存在 BOM 的官方标准；
现在的浏览器已经几乎实现了 JS 交互相同的方法和属性。

2.Window 对象

window 对象可以调用其他内置对象，且 window 可省略；

window 对象可以访问内置函数。

（1）Location 对象

可以参考【Window Location 对象】。

<html><head><title>Test Javascript</title><script>alert("跳转至百度");location.href = "https://www.baidu.com";</script>
</head></html>

（2）History 对象

可以参考【Window History 对象】。

<html><head><title>History Test01</title>
</head><body><a href="historyTest02.html">下一页</a><button id="btn">下一页</button><script>var btn = document.getElementById('btn');btn.onclick = function () {history.forward();}</script>
</body></html>

<html><head><title>History Test02</title>
</head><body><a href="historyTest01.html">上一页</a><button id="btn">上一页</button><script>var btn = document.getElementById('btn');btn.onclick = function () {history.back();}</script></body></html>

二、ES6

ECMAScript 6.0，ES6 是 JavaScript 语言的下一代标准，使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ECMAScript 是 JavaScript 语言的国际标准，JavaScript 是 ECMAScript 的实现。

1.let 关键字

用于声明变量，区别于 var；
let 声明的变量不能重复声明；
let 声明的变量有代码块的概念；
var 中，如果使用未声明的变量，结果是 undefined。但在 let 中会报错。

2.const 关键字

类似于 Java 中的 final，被修饰的变量、引用不可以更改。

三、构造函数创建对象

<html><head><title>Test Javascript</title>
</head><body><script>function Animal(name, age, sex) {this.name = name;this.age = age;this.sex = sex;this.show = function () {console.log(this.name + "\t" + this.age + "\t" + this.sex);}}var cat = new Animal("小猫", 2, "雌");cat.show();</script>
</body></html>

四、原型

1.说明

每个对象都有一个原型对象，可以使用原型对象中的所有属性和方法。

<html><head><title>Test Javascript</title>
</head><body><script>var person = {name: '张三',age: 18,sex: '男',}// 获取原型对象person.__proto__.show = function () {console.log('我是原型对象');}person.show();</script>
</body></html>

2.继承和继承链

JS 中的继承，就是一个对象继承另一个对象，该对象中拥有另一个对象的属性和方法。JS 对象拥有原型的属性和方法，所以可以通过原型继承实现属性和方法被继承。

<html><head><title>Test Javascript</title>
</head><body><script>Object.prototype.test = function () {console.log("Object 原型的 test 方法被调用");}function Person(name, age) {this.name = name;this.age = age;}function Student(score) {this.score = score;}Student.prototype = new Person("小王", 23);var stu = new Student(100);console.log(stu.name);console.log(stu.age);console.log(stu.score);stu.test();</script>
</body></html>