javascript中的面向对象

相信大家对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();

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • JavaScript面向对象编写购物车功能

    之前的项目中需要一个购买数据商品并付款的功能,刚开始一直不敢使用面向对象的写法,主要是没有理清思路,而且那时的数据商品比较的复杂,就一直没敢动,在网上也找些面向对象的写法,把思路理清一遍,就想自己试着写写. 接下来我会一步一步分析,面向对象的写法过程.整个流程大致分为:                1.先定义好一个商品列表的数据形式和商品总数集,类似: var data = [{name: 'name', unitPrice: 10, num: 2}]; var total = {type:

  • JS 面向对象之神奇的prototype

    JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 1 什么是prototype JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 前面我们说,对象的类(Class)和对象实例(Instance)之间是一种"创建"关系,

  • javascript面向对象入门基础详细介绍

    什么是对象 简单点说,编程语言中的对象是对现实中事物的简化.例如,我们一个人就是一个对象,但是编程语言很难完全描述一个这样复杂的对象.所以我们必须做出简化,首先,将人简化成属性和行为的组合,然后仅仅保留对程序有意义的几个属性以及行为.例如,我们做一个统计某学校的人的身高的程序,那么我们在这个程序中就可以把人的行为省略掉,只保留行为,并且只保留身高这一个属性.这样,我们就得到了一个最简单的对象. JavaScript字符串对象 对象的属性 其实我们之前在HTML DOM中已经就是在使用对象了.例如

  • js中的面向对象入门

    什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个名字都映射到一个值. 简单来理解对象就是由属性和方法来组成的 面向对象的特点 封装 对于一些功能相同或者相似的代码,我们可以放到一个函数中去,多次用到此功能时,我们只需要调用即可,无需多次重写. 在这里我们可以理解为创造对象的几种模式:单例模式,工厂模式,构造函数模式,原型模式等. 继承 子类可以继承父类的属

  • 归纳下js面向对象的几种常见写法总结

    //定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 1.工厂方式 var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) ); 2.比较正规的写法 function Ci

  • 面向对象的Javascript之二(接口实现介绍)

    就足以说明接口在面向对象的领域中有多重要.但JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制,以确定一组对象和另一组对象包含相似的的特性.所幸的是JS拥有强大的灵活性(我在上文已谈过),这使得模仿接口特性又变得非常简单.那么到底是接口呢? 接口,为一些具有相似行为的类之间(可能为同一种类型,也可能为不同类型)提供统一的方法定义,使这些类之间能够很好的实现通信. 那使用接口到底有哪些好处呢?简单地说,可提高系统相似模块的重用性,使得不同类的通信更加稳固.一旦实现接口,

  • Javascript之面向对象--封装

    第一步:做一个"手机的类" var MobilePhone = (function(){ ---- })() 第二步:考虑这个类,里需要那些类的私有属性,这里我想定义的是实例出来手机的数量 var MobilePhone = (function(){ //私有属性 var count = 0; //代表手机的数量 })() 第三步:创建一个构造函数,即实例时候,对产生的新象的一个初始化,例如属性,方法的初始化;在这个例子中,每一个手机都会有颜色,大小,价格属性.这里的构造函数也是一个闭

  • JS基于面向对象实现的拖拽功能示例

    本文实例讲述了JS基于面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; posit

  • JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

  • JS面向对象编程之对象使用分析

    因为大家总是用面向过程的编程思想来写JS代码,而且也由于网络上充斥了太多小"巧"的JS代码段,很多都是随意而为,很不规范,这也就造成了大家对JS的"误解",一味的认为它就是一个辅助的小东东,而不适合做大的东西开发.但是自从AJAX兴起后,大量的JS代码编写要求人们具备像写JAVA类似的代码一样,能够面向对象进行开发. 所以下面就结合我自己的体会和所学习的东东和大家一起来学习在JS中如何使用面向对象的编程.其实使用JS进行面向对象开发也不是很难的事情,因为在JS中每一

  • Javascript 面向对象(一)(共有方法,私有方法,特权方法)

    私有方法:私有方法本身是可以访问类内部的所有属性的,即私有属性和公有属性.但是私有方法是不可以在类的外部被调用. 私有方法写法: 复制代码 代码如下: function myClass () { var private_attribute = initial_value; function private_method () { } var private_method2 = function () { } } 实例showpet()就是一个私有方法 复制代码 代码如下: var pet=fun

随机推荐