JS面向对象编程

什么是面向对象编程(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

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364360.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mvp的全称_是让人提神醒脑的 MVP、MVVM 关系精讲!

前言很高兴见到你!我是《Jetpack MVVM 精讲》的独立原创作者 KunMinX,GitHub star 8.7k,专注于深度思考和 Jetpack MVVM 的分享。关于 MVP 和 MVVM 本质和区别的文章,本来我是不想写的,因为经过长达一年的耳濡目染 和对…

启航考研计算机课程,计算机考研专业课如何备考

计算机考研科目多,任务重,我们应该如何在有限的时间里更高效的复习,看一下天任启航考研为大家总结的复习计划吧!1、有计划,重基础计算机学科专业基础综合考试涵盖数据结构、计算机组成原理、操作系统和计算机网络基础等学科专业基…

IntelliJ中的实时模板

如上所述这里 ,的IntelliJ的现场模板可以让你轻松地插入预定义的代码片段到你的源代码。 我在下面发布了一些我最常用的模板,到GitHub上模板文件完整列表的链接(作为我设置新IntelliJ环境时的参考)以及将IntelliJ设置文件添加到G…

链家广州二手房的数据与分析——爬取数据

之前在博客分享了利用 R 和 rvest 包爬虫的基础方法。现在就来实战一下:爬取链家网广州 40,000 套二手房的数据。 之前在 Web Scraping with R 说过的爬虫方法在这篇中就不在赘述了。这里就分享怎么样爬取网站中翻页的数据。 >> Web Scraping across Multiple…

Vue脚手架搭建项目

全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ vue init webpack vue-app ? Project name vue-app ? Project description Vue Project ? Author Pr…

es安全组端口_从零开始在远程服务器(Linux)上搭建es,eshead和ik分词器

一、资源准备远程服务器一个(本教程为CentOS 64位)注:ik分词器版本需与es版本统一jdk1.8.0elasticsearch-head-master.zip二、开放端口注:本例采用的是阿里云服务器1.登录阿里云,选择控制台2.找到左上角的三条白线--》…

sipp模拟freeswitch分机测试(SIP协议调试)

1、freeswitch安装 1) 网上很多安装方法都不靠谱,系统版本,各种依赖库一堆问题,下面是验证的可行的。 yum install -y http://files.freeswitch.org/freeswitch-release-1-6.noarch.rpm epel-releaseyum install -y freeswitch-config-vanill…

hd计算机技术,BD和HD的区别是什么?

BD和HD的区别是什么?我们在网上下载电影的时候,往往发帖子的童鞋会提示我们影片的规格,如所谓BD1280或者HD1024等等,一些朋友搞不清楚这是什么意思,实际上我们只能说BD和HD的区别是什么,关于1280和1024那完全是分辨率…

Java比以往任何时候都摇滚

在TIOBE索引上 ,Java和C长期以来一直排名第一和第二,并且随着最近发布的JDK 8 GA的发布,对于我们的社区来说,情况不会变得更糟。 Java简直就是岩石! 它是构建几乎所有应用程序的最佳平台。 但是,为什么Ja…

滚动条判断是否滑动到顶部底部

/*** [滚动条]*/$(window).scroll(function() {var scrollTop $(this).scrollTop(); // 滚动条距离顶部的高度console.log("滚动条距离顶部的高度-->" scrollTop);var scrollHeight $(document).height(); // 当前页面的总高度console.log("当前页面的总…

DotNet软件开发框架

这是我4月份发在donews博客上的文章,现在都转到博客园来,风满袖希望进一步阐述你的架构,我就将这篇文章转移到博客园。原文:http://blog.donews.com/shanyou/archive/2005/04/23/347792.aspx 以我个人的能力,没有足够的时间和…

vue 拷贝 数组_vue 使用lodash实现对象数组深拷贝操作

我就废话不多说了,大家还是直接看代码吧~export default {mounted() {this.init();},methods: {init() {let lodash require(lodash);let obj1 {a: 1,b: { f: { g: 1 } },c: [1, 2, 3],h: () > {return 123;},k: undefined};let obj2 lodash.cloneDeep(obj1);…

VBA代码分行

VBA代码分行如果是语句可以直接在要换行的位加一个空格一个下划: Dim MyPath As String, MyName As String, _ tmpPath As String如果是字符串可以加以加一个空格一个&和一个空格加一个下划线:x "ABCDEFG" & _"HIJKLMNO" 转…

[Swift通天遁地]五、高级扩展-(6)对基本类型:Int、String、Array、Dictionary、Date的扩展...

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)➤GitHub地址&a…

JavaFX中的塔防(5)

这是本使用FXGameEngine在JavaFX中创建塔防游戏的正在进行的教程的第5部分。 敌人现在飞向目标的攻击路径,炮塔瞄准并射击。 因此,最重要的部分在那里,但是仍然缺少许多细节。 游戏只是开始而没有给我们机会为下一个浪潮做准备。 它不显示分数…

消息提示框-事件冒泡

1 <!DOCTYPE html>2 <html lang"en">3 4 <head>5 <meta charset"UTF-8">6 <title>事件冒泡-提示框</title>7 </head>8 <style>9 button {10 width: 160px;11 height: 30px;12 backgr…

我是如何解决asp.net程序在dreamWeaver中布局乱码的问题

每次把asp.net程序导入Dw2004中时&#xff0c;总是出现乱码&#xff0c;也不知道是什么原因。今天我就换了一个版本&#xff08;DW8&#xff09;&#xff0c;发现以前的问题全都没了。我想肯定是我的DW出现了问题&#xff0c;因为以前也出现过一次&#xff0c;也是重装后解决掉…

selenium3 + python - cookie定位

from selenium import webdriverfrom selenium.webdriver.support.wait import WebDriverWaitimport timedriver webdriver.Chrome()# 启动浏览器后获取cookiesprint(driver.get_cookies())driver.get("https://www.cnblogs.com/Teachertao/")# 打开主页后获取cooki…

分段函数if语句_C语言函数系列之库函数中基础必会函数(一)

&#xff01;&#xff01;&#xff01;阅前提醒&#xff1a;&#xff01;&#xff01;&#xff01;此文为c语言函数系列的第一篇&#xff0c;全系列字数将达到1w字以上且全为干货内容&#xff0c;请各位仔细阅读并打开编译器运行文章中出现的代码进行试验以确保能理解文章内容i…

JavaFX中的塔防(6)

因此&#xff0c;我们已经在本教程的第6部分中&#xff0c;与此同时&#xff0c;游戏也取得了长足的进步。 在这一部分中&#xff0c;我们最终将添加一个显示得分的图层&#xff0c;已达到目标的敌人数量&#xff0c;启动下一个Wave的按钮以及用于购买新炮塔的资金。 说到钱&am…