Javascript学习之创建对象

jollywing 发布于2019-08-21 15:34 / 2142人阅读

摘要：在中，除了几种原始类型外，其余皆为对象，，既然对象如此重要，那就列举一下在中如何创建对象通过构造函数创建对象实例对象字面量对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。

在Javascript中，除了几种原始类型外，其余皆为对象（Object，Array ...），既然对象如此重要，那就列举一下在Javascript中如何创建对象：

通过Object构造函数创建对象实例

var person = new Object();
person.name = "krew";
person.age = 26;

对象字面量

对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。

var person = {
  name : "krew",
  age : 26
}

工厂模式

工厂模式是一种设计模式，通过对创建具体对象的过程进行抽象。使用函数来封装创建对象的细节，可以无数次地调用用该函数，每次都可以得到包含制定内容的对象。

function personFactory(name, age){
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.sayName = function(){
    console.log(this.name);
  }
  return obj;
}

var person1 = personFactory("krew", 26);  
var person2 = personFactory("john", 20);

构造函数模式

基于工厂模式创建对象虽然方便，但是创建出来的对象没有特定的对象类型（比如原生对象Object, Array的实例都有自己的类型），所以就采用构造函数模式来创建对象，就能解决识别对象类型的问题。

function Person(name, age){
  this.name = name;
  this.age = age;
  this.sayName = function() {
    console.log(this.name);
  }
}

var person1 = new Person("krew", 26);
var person2 = new Person("john", 20);

person1.sayName();  // "krew"
person2.sayName();  // "john"

person1.constructor == Person  // true
person2.constructor == Person  // true

原型模式

每个函数在创建的时候，就会根据特定的规则为该函数创建一个prototype属性，这个属性是指向函数的原型对象的指针。这个原型对象的包含可以由特定类型的所有实例共享的属性和方法。所以，在构造函数的prototype属性上添加属性与方法，该构造函数的所有实例都会在原型链上查找到这些属性与方法。

function Person() {
}
Person.prototype.name = "krew";
Person.prototype.age = 26;
Person.prototype.sayName = function() {
  console.log(this.name);
}

var person1 = new Person();
var person2 = new Person();

person1.sayName();  // "krew"
person2.sayName();  // "krew"

组合构造函数和原型模式

由于原型对象中的属性是被很多实例所共享的，对于引用类型的属性值，将会存在实例间无法隔离的问题：

function Person() {
}
Person.prototype = {
  constructor : Person,
  name : "krew",
  age : 26,
  friends : ["john", "kitty"],
  showFriends : function() {
    console.log(this.friends);
  }
}
var person1 = new Person();
var person2 = new Person();

person1.friends.push("petter");

person1.showFriends()  // ["john", "kitty", "petter"]
person2.showFriends()  // ["john", "kitty", "petter"]

可以看到，仅是在实例person1的friends属性上添加值，但person2也跟着变化。这是因为friends数组存在于Person.prototype而非person1中，person1与person2中的friends皆为引用Person.prototype中的friends，所以当通过person1来改变friends的时候，person2中的friends也会反映出来。
通过组合构造函数与原型模式可以解决上面出现的问题，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性，每个实例会有自己的一份实例属性，同时又共享着方法的引用，极大的节省了内存。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayName = function() {
  console.log(this.name);
}

var person1 = new Person("krew", 26);
var person2 = new Person("john", 20);

person1.sayName();  // "krew"
person2.sayName();  // "john"

动态原型模式

function Person(name, age){
  this.name = name;
  this.age = age;
  if (typeof this.sayName != "function") {
    Person.prototype.sayName = function() {
      console.log(this.name);
    }
  }
}

var person1 = new Person("krew", 26);
var person2 = new Person("john", 20);

person1.sayName();  // "krew"
person2.sayName();  // "john"

寄生构造函数模式

function Person(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.sayName = function() {
    console.log(this.name);
  }
  return obj;
}

var person1 = new Person("krew", 26);
var person2 = new Person("john", 20);

person1.sayName();  // "krew"
person2.sayName();  // "john"

稳妥构造函数模式

function Person(name) {
  var obj = new Object();
  obj.sayName = function() {
    console.log(name);
  }
  return obj;
}

var person1 = Person("krew");
var person2 = Person("john");

person1.sayName();  // "krew"
person2.sayName();  // "john"

云服务器 GPU云服务器学习之substr() 深度学习之概要 webrtc学习之九 linux学习之centos

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88229.html

JavaScript学习之Object(下)new命令

摘要：命令作用作用是执行构造函数，返回实例对象上面例子是自定义一个构造函数，其最大的特点就是首字母大写，用执行构造函数其中，在的执行下，代表了实例化后的对象，这个也就有属性注意点如果不用执行构造函数，那么指向的是全局有两种方式可以避免内部定义严格 new命令 new作用作用是执行构造函数，返回实例对象 function F() { this.name = object } var ...

Salamander 2019-08-23 12:14 评论0 收藏0
JavaScript学习之零碎记忆点总结记录(一)

摘要：总结记录常见的五种类型报错语法解析错误变量未定义变量类型错误数组越界相关函数参数错误能防止报错导致后面代码不能执行问题的未定义不影响后面函数的执行注意点在报错前，不执行里的内容不报错也不执行在报错后，的内容不会被执行执行完结束，如果有总结记录 try-catch-finally 常见的五种类型报错 SyntaxError语法解析错误 ReferenceError变量未定义 Type...

fou7 2019-08-23 12:16 评论0 收藏0
JavaScript学习之对象原型及继承

摘要：原型要掌握这三者之间的关系，通过代码例子记录一下自身属性的这里就是通过代码看一下做了什么默认情况下，将的所有属性包括继承的赋值给有什么东西呢自己的原型链，添加一个属性，用来指明对象的谁构造的自身全部属性，这边构建一个空对象原型，所以没有自有原型要掌握这三者之间的关系prototype，constructor,__proto__通过代码例子记录一下 function F() { ...

妤锋シ 2019-08-23 12:16 评论0 收藏0
JavaScript学习之Object(下)相关方法

摘要：它不区分该属性是对象自身的属性，还是继承的属性。那么我们要遍历对象所有属性，包括继承以及不可遍历的属性，用加原型遍历实现类似的用递归 Object静态方法 Object自身方法，必须由Object调用，实例对象并不能调用 Object.getPrototypeOf() 作用是获取目标对象的原型 function F() {}; var obj = new F(); console.lo...

amuqiao 2019-08-23 12:15 评论0 收藏0
Javascript学习之继承

摘要：继承是面向对象编程语言中的一个重要的概念，继承可以使得子类具有父类的属性和方法或者重新定义追加属性和方法等。但是在中没有类的概念，是基于原型的语言，所以这就意味着对象可以直接从其他对象继承。继承是面向对象编程语言中的一个重要的概念，继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。但是在Javascript中没有类的概念，是基于原型的语言，所以这就意味着对象可以直接...

CHENGKANG 2019-08-21 15:34 评论0 收藏0