web前端-js对象创建的几种方式

需求: 创建一本书

• 方式一, 对象的字面量表现形式

var book = {
    name:'js面向对象',
    author:'liyajie',
    price:100.00,
    showName:function(){
        console.log(this.name);
    }
}
// 执行showName方法
book.showName();// js面向对象

• 方式二, 使用new Object()的方式, 内置构造函数的方式

var book = new Object();
book.name = 'js面向对象';
book.author = 'liyajie';
book.price = 100.00;
book.showName = function(){
      console.log(this.name);
}
// 执行showName方法
book.showName(); // js面向对象

• 方式三, 使用简单工厂方法创建对象.
  • 缺点: 如果创建不同的对象, 我们没有办法分辨

// 使用工厂方法创建
function bookFac(name,author){
    var book = new Object();
    book.name = name;
    book.author = author;
    book.showName = function(){
        console.log(this.name);
    }
    return book;
}
var b = bookFac('java开发指南','王强');
b.showName();

• 方式四, 自定义构造函数来创建对象, 因为系统的构造函数都是首字母大写的, 所以我们模仿一下, 我们自定义的构造函数也尽量大写.

function Person(name,age){
    this.name = name;
    this.age = age;
    this.showInfo = function(){
      console.log(this.name + '---'+ this.age);
    }
}
var p = new Person('王强', 23);
p.showInfo();// 打印出   王强----23

使用自定义构造函数创建对象的内部实现细节:

1. 默认内部会创建一个空对象 var o = new Object();
2. 默认会把这个对象赋值给this this = o;
3. 默认会把当前这个对象的原型赋值给这个空对象 o.prototype = Person.prototype;
4. 我们手动通过this设置新对象的属性和方法.
5. 构造函数的最后, 默认会把新创建的对象返回. 如果手动返回的是值类型, 则忽略, 如果是引用类型的则使用.