1. 程式人生 > 實用技巧 >javascript 面向物件-建立物件

javascript 面向物件-建立物件

沒有物件的要先去找物件哦

建立物件的方法
  1. 字面量 的方式建立物件
let p1 = {
    name: 'Iron man',
    run: function(){
        console.log(this.name, '跑起來');
    }
}
var p2 = new Object();
p2.name = 'Iron man';
p2.run = function(){
    console.log(this.name, '跑起來');
}
  1. 建構函式 建立
function Person(name, age){
    // 1. 自動建立一個新物件 this->新物件

    // 2. 繫結 屬性 和 行為
    this.name = name;
    this.age = age;

    this.func = function(){
        console.log('我是:', this.name)
    }

    // 3. 自動 返回 this
    // 3.1 此種方式 不需要返回
    // 3.2 當返回 this,基本資料型別 時 不影響
    // 3.3 當返回 物件 時 真的就把這個物件返回了
}
var p3 = new Person('Thanos', 1200);
p3.func();
傳參優化
// 傳參優化:引數多時 傳入一個物件
function Person(options){

    this.name = options.name;
    this.age = options.age;

    this.func = function(){
        console.log('我是:', this.name)
    }
}
var p = new Person({name: 'Thanos', age: 1200});
p.func();
使用 prototype 建立共享的方法
function Person(options){

    this.name = options.name;
    this.age = options.age;

    this.func = function(){
        console.log('我是:', this.name)
    }
}

Person.prototype.run = function(type){
    console.log(this.name, '依靠' , type, '飛');
}

var p = new Person({ name: 'Thanos', age: 1200 });
var p2 = new Person({ name: 'Iron man', age: 60 });
console.log(p.func === p2.func);
console.log(p.run === p2.run);
最後一版
// 和上面相比 這個方法 會去掉 constructor
function Person(options){
    this._init(options);
}

Person.prototype ={ 

    _init(options){
        this.name = options.name;
        this.age = options.age;
    },

    run: function(type){
        console.log(this.name, '依靠' , type, '飛');
    }
}

var p = new Person({ name: 'Thanos', age: 1200 });