首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

AngularJS 中如何創建對象?不是 Java 風格的 new People()

     編輯:程式設計綜合問答

問題

在 AngularJS 裡想新建一個 People 對象,寫 People people = new People() 這樣的 Java 風格代碼行嗎?

核心概念:JavaScript 無類、基於原型

AngularJS 是 JavaScript 框架,**JavaScript 沒有類的概念**,也沒有 Java 那樣的強類型聲明。創建對象的方式根本不同:

1. 字面量對象(最常用)

var people = {
    name: '張三',
    age: 25,
    sayHello: function() { alert('Hi, ' + this.name); }
};

2. 構造函數 + new(模擬類)

function People(name, age) {
    this.name = name;
    this.age = age;
}
People.prototype.sayHello = function() {
    alert('Hi, ' + this.name);
};

var p1 = new People('李四', 30); // 正確寫法:var p1 = new People();

注意:People 必須是一個函數(構造函數),而非類聲明。

3. Object.create()(ES5 原型繼承)

var peopleProto = {
    sayHello: function() { console.log('Hi, ' + this.name); }
};
var p2 = Object.create(peopleProto);
p2.name = '王五';
p2.age = 28;

4. AngularJS 服務/工廠模式(推薦用於業務模型)

在 AngularJS 應用中,業務對象通常通過 factory 或 service 定義,由依賴注入容器管理:

angular.module('app').factory('People', function() {
    function People(name, age) {
        this.name = name;
        this.age = age;
    }
    People.prototype.sayHello = function() { ... };
    return People; // 返回構造函數
});

// 控制器中注入使用
controller('MyCtrl', function(People) {
    var p = new People('趙六', 35);
});

常見誤區

  • 以為 AngularJS 有自己的對象創建語法:AngularJS 不擴展 JS 對象模型,純粹使用原生 JS。
  • 寫成 var people = new People() 但忘記定義 People 函數:會報 People is not defined 或 People is not a constructor。
  • 混淆 JSON 數據與對象實例:後端返回的 JSON 需經構造函數或工廠函數轉換為帶行為的對象實例。

總結

AngularJS 創建對象**就是 JavaScript 創建對象**。忘掉 Java 的 Class Name = new Class(),掌握 字面量、構造函數、原型、Object.create、工廠函數 這幾種原生模式,結合 AngularJS 依賴注入管理業務模型,才是正道。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved