分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

JS面向对象编程

发布时间:2023-09-06 02:20责任编辑:蔡小小关键词:面向对象

什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程。

面向对象编程的特点

  • 抽象:抓住核心问题
  • 封装:只能通过对象来访问方法
  • 继承:从已有对象上继承出新的对象
  • 多态:多对象的不同形态

对象的组成

  • 属性:对象下面的变量叫做对象的属性
  • 方法:对象下面的函数叫做对象的方法

一、使用Object函数或对象字面量都编程

var obj1=new Object();//创建一个空的对象 ???????obj1.name=‘小明‘; ?//属性 ???????obj1.showName=function(){ ??//方法 ???????alert(this.name);//this指向obj } obj1.showName();//小明var obj2=new Object();//创建一个空的对象 ???????obj2.name=‘小灰‘; ?//属性 ???????obj2.showName=function(){ ??//方法 ???????alert(this.name);//this指向obj } obj2.showName();//小灰

缺点:创建多个对象时,会产生大量的重复代码。

解决方法:工厂方式——面向对象中的封装函数

二、工厂方式——面向对象中的封装函数

//工厂方式 : 封装函数function createPerson(name){ ???var obj = new Object(); ???obj.name = name; ???obj.showName = function(){ ???????alert( this.name ); ???}; ???return obj; ???}var p1 = createPerson(‘小明‘);p1.showName();var p2 = createPerson(‘小强‘);p2.showName();

缺点:创建对象都是使用Object的原生构造函数来实现的,因此无法识别对象类型

解决方法:构造函数模式——给一个对象添加方法

三 、构造函数模式——给一个对象添加方法

//new 后面调用的函数叫构造函数  function CreatePerson(name){    this.name=name;    this.showName=function(){      alert(this.name);    }  }  var p1=new CreatePerson(‘小明‘);//当new去调用一个函数时,函数中的this就是创建出来的对象而函数中的返回值就是this   p1.showName();  var p2=new CreatePerson(‘小强‘);  p2.showName();
  //缺点
  console.log( p1.showName == p2.showName )//false 他们值不同,地址不同

使用自定义的构造函数,定义对象类型的属性和方法,与工厂方式的区别:

  • 没有显式的创建对象
  • 直接将属性和方法赋给this对象
  • 没有return语句

缺点:就是在创建对象时,每个对象都有一套自己的方法,每定义一个函数都实例化了一个对象

解决方法:原型模式(prototype)——给一类对象添加方法

四、原型模式(prototype)——给一类对象添加方法

原型(prototype):重写对象下面公用的属性或方法,让公用的属性或方法在内存中只存在一份(提高性能),也就是说所有在原型对象中创建的属性或方法都直接被所有对象实例共享。

  • 原型:类比css中的class
  • 普通方法:类比css中的style
function CreatePerson(name){//普通方法  this.name=name;}CreatePerson.prototype.showName=function(){//原型  alert(this.name);}var p1=new CreatePerson(‘小明‘);p1.showName();var p2=new CreatePerson(‘小强‘);p2.showName();console.log( p1.showName== p2.showName);//true ??

面向对象中this的问题

一般会出现问题的情况有两种:

  • 定时器
  • 事件
//定时器function Aaa(){ ?????????var _this=this;//将当前this值保存 ???????????this.a=12; ?????????setInterval(function(){//定时器中this指向window ???????????????_this.show(); ??????????},1000);}Aaa.prototype.show=function(){ ??????????alert(this.a); }var obj=new Aaa();//12

JS面向对象编程

原文地址:https://www.cnblogs.com/ycg-myblog/p/9876678.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved