```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