javascript中的面向对象

SKYZACK 发布于2019-08-20 15:26 / 478人阅读

摘要：构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性，这种组合模式还支持向构造函数传递参数。实例对象都有自己的一份实例属性的副本，同时又共享对方法的引用，最大限度地节省了内存。而关键字则代表实例对象。

相信大家对javascript中的面向对象写法都不陌生，那还记得有几种创建对象的写法吗？相信大家除了自己常写的都有点模糊了，那接下来就由我来帮大家回忆回忆吧！

1. 构造函数模式

通过创建自定义的构造函数，来定义自定义对象类型的属性和方法。

function cons(name,age){
  this.name = name;
  this.age = age;
  this.getMes = function(){
    console.log(`my name is ${this.name},this year ${this.age}`);
  }
}

var mesge = new cons("will",21);
mesge.getMes();

2. 工厂模式

该模式抽象了创建具体对象的过程，用函数来封装以特定接口创建对象的细节

function cons(name,age){
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.getMes = function(){
    console.log(`my name is ${this.name},this year ${this.age}`);
  }
  return obj;
}
var mesge = cons("will",21);

mesge.getMes();

3. 字面量模式

字面量可以用来创建单个对象，但如果要创建多个对象，会产生大量的重复代码

var cons = {
  name: "will",
  age : 21,
  getMes: function(){
    console.log(`my name is ${this.name},this year ${this.age}`);
  }
}

cons.getMes();

4. 原型模式

使用原型对象，可以让所有实例共享它的属性和方法

function cons(){
  cons.prototype.name = "will";
  cons.prototype.age = 21;
  cons.prototype.getMes = function(){
    console.log(`my name is ${this.name},this year ${this.age}`);
  }
}

var mesge = new cons();
mesge.getMes();

var mesge1 = new cons();
mesge1.getMes();

console.log(mesge.sayName == mesge1.sayName);//true

5. 组合模式

最常见的方式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性，这种组合模式还支持向构造函数传递参数。实例对象都有自己的一份实例属性的副本，同时又共享对方法的引用，最大限度地节省了内存。该模式是目前使用最广泛、认同度最高的一种创建自定义对象的模式

function cons(name,age){
  this.name = name;
  this.age = age;
  this.friends = ["arr","all"];
}
cons.prototype = {
  getMes : function(){
    console.log(`my name is ${this.name},this year ${this.age}`);
  }
}

var mesge = new cons("will",21);
var mesge1 = new cons("jalo",21);

console.log(mesge.friends);
mesge.friends.push("wc"); //还可以操作数组哈O(∩_∩)O！
console.log(mesge.friends);
console.log(mesge1.friends);

mesge.getMes();
mesge1.getMes();

console.log(mesge.friends === mesge1.friends);
console.log(mesge.sayName === mesge1.sayName);

最后在告诉你个秘密，ES6引入了类（Class），让对象的创建、继承更加直观了

// 定义类
 
class Cons{

  constructor(name,age){

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

  }

  getMes(){

    console.log(`hello ${this.name} !`);

  }

}

let mesge = new Cons("啦啦啦~",21);
mesge.getMes();

在上面的代码片段里，先是定义了一个Cons类，里面还有一个constructor函数，这就是构造函数。而this关键字则代表实例对象。

而继承可以通过extends关键字实现。

class Ctrn extends Cons{

  constructor(name,anu){

    super(name);  //等同于super.constructor(x)
    this.anu = anu;

  }

  ingo(){
    console.log(`my name is ${this.name},this year ${this.anu}`);
  }

}

let ster = new Ctrn("will",21);
ster.ingo();
ster.getMes();

好了，这次的分享就到这了，喜欢的朋友可以收藏哦（关注我也是可以滴O(∩_∩)O）！！！

GPU云服务器云服务器 javascript 面向对象 javascript面向对象 javascript面向对象编程 javascript面向对象编程指南

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

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

SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

AaronYuan 2019-08-20 18:55 评论0 收藏0
面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0
JS对象(1)重新认识面向对象

摘要：对象重新认识面向对象面向对象从设计模式上看，对象是计算机抽象现实世界的一种方式。除了字面式声明方式之外，允许通过构造器创建对象。每个构造器实际上是一个函数对象该函数对象含有一个属性用于实现基于原型的继承和共享属性。 title: JS对象(1)重新认识面向对象 date: 2016-10-05 tags: JavaScript 0x00 面向对象从设计模式上看，对象是...

superw 2019-08-21 11:17 评论0 收藏0
javascript面向对象之“多态”

摘要：之前，本质上不能算是一门面向对象的编程语言，因为它对于封装继承多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。所以在中出现了等关键字，解决了面向对象中出现了问题。 ES6之前，javascript本质上不能算是一门面向对象的编程语言，因为它对于封装、继承、多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以让我们以...

JerryWangSAP 2019-08-23 14:11 评论0 收藏0