```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 创建对象的写法有以下7种，其中第6、7性能是最好的，但不一定适用，根据情况而定选择哪种写法 -->
<script type="text/javascript">
// 1. 使用Object对象
var person = new Object();
person.name = "Jack";
person.getName = function() {
console.log(this.name);
}
// 调用语法
console.log(person.name); // Jack，或person["name"]
person.getName(); // Jack，或person["getName"]
</script>
<script type="text/javascript">
// 2. 通过字面量来创建
var person = {
name: "Jack",
getName: function() {
console.log(this.name);
}
}
// 调用语法
console.log(person.name); // Jack，或person["name"]
person.getName(); // Jack，或person["getName"]
</script>
<script type="text/javascript">
// 3. 工厂函数
function createPerson(name) {
return {
name: name,
getName: function() {
console.log(this.name);
}
}
}
// 调用语法
var person = createPerson("Jack");
console.log(person.name); // Jack，或person["name"];
person.getName(); // Jack，或person["getName"];
</script>
<script type="text/javascript">
// 4. 构造函数创建
function Person(name) {
this.name = name;
this.getName = function() {
console.log(this.name);
}
}
// 调用语法
var person = new Person("Jack");
console.log(person.name); // Jack，或person["name"]
person.getName(); // Jack，或person["getName"]()
</script>
<script type="text/javascript">
// 5. 构造函数创建，但把共享的属性/函数放在构造函数外部定义
function Person(name) {
this.name = name;
this.getName = getName;
}
function getName() {
console.log(this.name);
}
// 调用语法
var person = new Person("Jack");
console.log(person.name); // Jack，或person["name"]
person.getName(); // Jack，或person["getName"]()
</script>
<script type="text/javascript">
// 6. 将共享的属性/函数放在原型对象prototype中，这也是最好的方法
function Person(name) {
this.name = name;
this.getName = function() {
console.log(this.name)
}
}
// 将共享的属性/函数放在prototype原型对象上
Person.prototype.height = "30";
Person.prototype.getHeight = function() {
console.log(this.height);
}
// 调用语法
var person = new Person("Jack");
console.log(person.name); // Jack，或person["name"]
person.getName(); // Jack，或person["getName"]()
console.log(person.height); // 30，或person["height"]
person.getHeight(); // 30，或person["getHeight"]()
</script>
<script type="text/javascript">
// 7. 更简单的原型写法
function Person(name) {
this.name = name;
this.getName = function() {
console.log(this.name)
}
}
Person.prototype = {
constructor: Person,
height: "30",
getHeight: function() {
console.log(this.height);
}
}
// 调用语法
var person = new Person("Jack");
console.log(person.name); // Jack，或person["name"]
person.getName(); // Jack，或person["getName"]()
console.log(person.height); // 30，或person["height"]
person.getHeight(); // 30，或person["getHeight"]()
</script>
</body>
</html>
```
- js应用场景
- js组成
- js书写位置
- 浮点数精度问题
- undefined与null的区别
- 数据类型转换
- 运算符优先级
- 代码调试
- 函数
- 函数的定义和调用
- 函数的return细节
- 函数是一种数据类型
- this的指向
- 函数成员
- 函数闭包
- 作用域
- 预解析
- js对象
- 对象的创建与调用
- new关键字
- this关键字
- 构造函数创建对象
- 事件
- 数据类型
- 继承
- 杂项
- 如何阻止标签的默认行为
- 为一个标签绑定或移除任何一个事件
- 如何阻止事件的冒泡行为
- 事件的三个阶段
- 移动元素的条件
- 匀速动画函数封装
- 变速动画函数封装
- 获取元素的css属性值
- 数据类型判断方法
- 创建对象的7种写法
- 如何继承
- 为js内置对象添加原型函数
- 将局部变量转换为全局变量
- call函数的用法
- 沙箱
- 浅拷贝
- 深拷贝
- 对象赋值会改变对象
- 解析URL中的字符串
- 格式化日期
- 获取当前浏览器类型
- Vue3.x
- 调式工具Vue Devtools