JavaScript中对象创建的几种方式

/* 第一种:Object 构造函数创建 */
var Person0 = new Object();
Person0.name = "Nike";
Person0.age = 29;
console.log(Person0); //=>{name: 'Nike', age: 29}

console.log("111111111111111111111111111111111111111");
/* 第二种:使用对象字面量表示法 */
var Person1 = {
  name: "Nike",
  age: 29,
};
console.log(Person1);

console.log("22222222222222222222222222222222222222");
/* 第三种:使用工厂模式创建对象 */
function createPerson(name, age, job) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function () {
    console.log(this.name);
  };
  return o;
}
var person21 = createPerson("Nike", 29, "teacher");
var person22 = createPerson("Arvin", 20, "student");
console.log(person21); //=>{name: 'Nike', age: 29, job: 'teacher', sayName: ƒ}
person21.sayName(); //=>Nike
console.log(person22); //=>{name: 'Arvin', age: 20, job: 'student', sayName: ƒ}
person22.sayName(); //=>Arvin
// 在使用工厂模式创建对象的时候,我们都可以注意到,
// 在 createPerson 函数中,返回的是一个对象。
// 无论是console.log(typeof person21); //=>object
// 还是console.log(typeof person22); //=>object
// 返回的都是object类型,
// 所以我们就无法判断返回的对象究竟是一个什么样的类型,
// 我们其实希望返回的是一个Person类型的对象.
console.log(typeof person21); //=>object
console.log(typeof person22); //=>object

console.log("333333333333333333333333333333333333333333333333");
/* 第四种: 使用构造函数创建对象 */

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function () {
    console.log(this.name);
  };
}
var person31 = new Person("Nike", 29, "teacher");
var person32 = new Person("Arvin", 20, "student");
console.log(person31); //=>Person {name: 'Nike', age: 29, job: 'teacher', sayName: ƒ}
console.log(typeof person31); //=>object
// 我们发现使用使用new Person()创建的person31是Person的实例,
// 而使用使用工厂模式创建的对象person31不是Person的实例,虽然他们的内容一模一样
console.log(person31 instanceof Person); //=>true
console.log(person21 instanceof Person); //=>false
// 无论是person21还是person31都是Object的实例,所以都是输出为真
console.log(person21 instanceof Object); //=>true
console.log(person31 instanceof Object); //=>true

console.log("4444444444444444444444444444444444444444444444444444444");
/* 第五种:原型创建对象模式 */

function Person4() {}
console.log(Person4); //=>ƒ Person4() {}
console.log(Person4.prototype); //=>{constructor: ƒ}
//使用原型创建对象的方式,可以让所有对象实例共享它所包含的属性和方法。
Person4.prototype.name = "Nike";
Person4.prototype.age = 20;
Person4.prototype.job = "teacher";
Person4.prototype.sayName = function () {
  console.log(this.name);
};
var person41 = new Person4();
var person42 = new Person4();
console.log(person41); //=>Person4
console.log(person42); //=>Person4
console.log(person41 === person42); //=>false
// ------------------------------------------------
// person41默认使用原型的属性,其name就是Nike,
// 当我对person41的name进行修改之后,
//这个修改后的名字就会覆盖原来原型中的名字,
//所以名字变成了Alice
console.log(person41.name); //=>Nike
person41.name = "Alice";
console.log(person41.name); //=>Alice

console.log("55555555555555555555555555555555555555555");
/* 第六种:组合使用构造函数模式和原型模式
    构造函数模式与原型模式结合的方式,
    构造函数模式用于定义实例属性,
    而原型模式用于定义方法和共享的属性
*/

function Person5(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
Person5.prototype = {
  constructor: Person5,
  //   共有属性isMan
  isMan: true,
  //   共有方法sayName()
  sayName: function () {
    console.log(this.name);
  },
};
var person51 = new Person5("Nike", 20, "teacher");
var person52 = new Person5("Alice", 10, "teacher");
console.log(person51); //=>Person5 {name: 'Nike', age: 20, job: 'teacher'}
console.log(person52); //=>Person5 {name: 'Alice', age: 10, job: 'teacher'}
// 各自属性
console.log(person51.name); //=>Nike
console.log(person52.name); //=>Alice
// 共有属性
console.log(person51.isMan); //=>true
console.log(person52.isMan); //=>true
// 共有方法
person51.sayName();
person52.sayName();




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值