当前位置: 首页 > 编程日记 > 正文

JavaScript中几个重要的知识点(1) ---- 面向对象

JavaScript中几个最重要的大知识点

  1. 面向对象

  2. DOM事件

  3. 异步交互ajax

面向对象

在JS中可以把任意的引用和变量都看成是一个对象。面向对象的主要三个表现形式:

  • 封装

  • 继承

  • 多态

1. 封装
1.1 单例模式
var obj={name: "sam",age: 12,method: function(){var objName=this.name;return objName;},ale: function(){var that=this;function sum(num1,num2){this.num=that.age;return num1+this.num+num2;}console.log(sum(1,2));}
}

单例模式有不污染全局变量和节约window栈内存的优点

var main={init:function(){this.changeName();},changeName:function(){var that=this;var oBody=document.body;oBody.onclick=function(){that.changeValue();}},changeValue:function(){document.getElementById("one").value="sam";}
}main.init();
1.2 工厂模式

能够快速地根据不同需求,传入不同参数,来返回不同的对象,缺点是不能判断对象的类型

function self(name,age,sex){var person={};person.name=name;person.age=age;person.sex=sex;if(sex=="man"){person.job="coder";}if(sex=="woman"){person.job="beatiful";}return person;
}
var mine=self("sam",22,"man");
console.log(mine.job);
1.3 构造函数模式

构造函数模式能够解决工厂模式不能判断对象类型的缺点,构造函数模式能够自定义类,构造具有相同属性和方法的实例

function Person(){this.eat="food";this.sleep="night";this.say=function(){console.log("I am person,I can speak");}
}
var person1=new Person();
person1.say();

call()和apply()方法

  • call()方法:
    让调用对象执行,然后第一参数是谁,调用对象的this就改变指向是谁,后边跟参数,依次对应传入

  • apply()方法:
    让调用对象执行,然后第一参数是谁,调用对象的this就改变指向是谁,后边跟参数,以数组的形式传入

2.继承
2.1 原型继承

把被继承者的构造函数赋值给继承者的prototype,注意需要给继承者的prototype手动添加constructor属性

function A(){this.name="A";this.sayHi=function(){console.log("Hi!I am A");}
}function B(){this.name="B";this.age=22;this.sayHi=function(){console.log("Hi,I am B");}
}
B.prototype.work=function(){console.log("I can play");
}A.prototype=new B();
A.prototype.constructor=A;
var a=new A();
console.log(a);
2.2 call / apply 继承

把被继承者设置的私有属性,克隆一份作为继承者私有的

function A(){this.name="A";this.age=22;this.sayName=function(){console.log("I am A");}
}function B(){A.call(this);
}var b=new B();
console.log(b);
2.3 冒充对象继承

继承者继承了被继承者私有和公有的属性和方法

function A(){this.x=100;
}
A.prototype.getX=function(){console.log(this.x);
}function B(){var temp=new A();for(var key in temp){this[key]=temp[key];}
}var b=new B();
console.log(b);
3. 多态

javascript中没有严格的多态,因为JS中没有重载,相同名字的函数不能同时存在,后定义的重名函数会覆盖先定义的函数(即使两个形参不相同)。我们可以写一个通用方法来模拟面向对象语言的多态

function simPoly(){if(arguments.length==1){return function(){console.log(1);}}if(arguments.length==2){return function(){console.log(2);}}
}simPoly(1,2)();

相关文章:

scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离

轉自:http://www.cnblogs.com/mrhgw/archive/2006/11/08/553737.html 补充: scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的…

连接服务器_命令行连接FTP服务器

Windows下: 打开命令行窗口,输入 ftp,进入ftp命令模式: 输入 open ip地址 端口,进入ftp服务器,如open 172.16.3.77 2121。如下图: 输入Windows下的用户名,然后输入密码(注意:密码是不显示的,输入用户名密码不能时间太长,否则连接断掉)。 查看ftp服务器中的文件,输…

mapreduce作业reduce被大量kill掉

之前有一段时间。我们的hadoop2.4集群压力非常大。导致提交的job出现大量的reduce被kill掉。同样的job执行时间比在hadoop0.20.203上面长了非常多。这个问题事实上是reduce 任务启动时机的问题,因为yarn中没有map slot和reduce slot的概念,且ResourceMan…

Matlab编程与数据类型 -- M文件的编辑和存储

本微信图文详细介绍了Matlab中M文件的编辑和存储。

一个老工程师对理工科学生的忠告

[1]好好规划自己的路,不要跟着感觉走!根据个人的理想决策安排,绝大部分人并不指望成为什么院士或教授,而是希望活得滋润一些,爽一些。那么,就需要慎重安排自己的轨迹。从哪个行业入手,逐渐对该行…

64 安装_解决“不能安装 64 位Office,因已安装 32 位 Office 产品”问题

换了个电脑装64位的Office 2010(Office_64),双击setup刚准备装,就收到以下错误提示:“不能安装 64 位版本的 Office 2010,因为您当前已经安装 32 位 Office 产品。64 位安装不支持 32 位产品安装:如果要安装 64 位 Off…

Python---内置函数

一、数值类操作 abs(x)求绝对值 1、参数可以是整型,也可以是复数 2、若参数是复数,则返回复数的模complex([real[, imag]])创建一个复数divmod(a, b)分别取商和余数 注意:整型、浮点型都可以float([x])将一个字符串或数转换为浮点数。如果无参…

《C#精彩实例教程》小组阅读11 -- C#结构与类

本微信图文详细介绍了C#的结构与类。

软件测试工程师职业介绍和规划

如存在没有任何错误的程序,那么世界也会不复存在。” 因错误而存在,因修正错误而存在,这就是软件测试工程师的存在之道。虽然测试不是解决错误的根本举措,但却是必须的手段。 软件测试工程师(Software Testing Engine…

python selenium脚本_怎样开始写第一个基于python的selenium脚本

1、下载并安装python(http://www.python.org/geti/)。2、安装selenium(http://pypi.python.org/pypi/selenium)下载并解压缩selenium-2.32.0.tar.gz. 把selenium-2.32.0\py\下的selenium整个文件夹放入Python33\Lib\site-packages目录下。3 下载Eclipse后安装pydev插件4 打…

《C#精彩实例教程》小组阅读12 -- C#面向对象技术高级应用

本微信图文详细介绍了C#面向对象技术高级应用。

linux php --ini

$ php --ini

文档类型定义DTD

XML系列:文档类型定义DTD (转) 一,什么是DTD?1,XMl是一种元标记语言,是描叙语言的语言,定义标记的语法结构,从而生成新标记。而DTD则是为新标记建立文档并进行规范说明。也就是说XML定义标记的语…

gis中的擦除_擦除—帮助 | ArcGIS for Desktop

输出 coverage 已不存在。如果注记的左下起点位于擦除多边形内部,则擦除该注记。新结点的属性将设置为零。移除与擦除 coverage 多边形重叠的输入 coverage 多边形。擦除 coverage 必须具有面拓扑。输出 coverage 中所有要素的 User-ID 与输入 coverage 中所有要素的…

C# 3.0/3.5语法新特性示例汇总[转]

//作者:杨卫国//时间:2008年2月21日//说明:C#语法新特型示例usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSystem.Windows.Forms;namespaceC3{ class Program { //新特性1:简单属性,无需另外多写一个私有字段,比较适合于…

Matlab编程与数据类型 -- 循环控制语句之二:while/end

本微信图文详细介绍了Matlab中while/end循环控制语句。

Centos6,7默认启动模式的更改

有时候我们想以为图形页面启动,启动后直接到图形页面,但是有时候也想启动后直接进入文本页面,我们只需要修改init即可; Centos6启动模式配置文件路径:/etc/inittab Centos7启动模式配置文件路径:/usr/lib/s…

python中计数_Python中的统计计数

关闭。此问题不符合堆栈溢出准则。它当前不接受答案。想改善这个问题吗?更新问题,使其成为Stack Overflow的主题。6年前关闭。我有一组五个字母A..E。我想将它们分成3个一组,不重复字母,但是对于从哪里开始我一无所知。解决方案假…

angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )

Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库 在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们其中任何一个效果都一样. 但又觉得好像哪里不太对.... 这篇就来说说,我在开发时的应用方…

【转】Flex Application 初始化顺序

转自&#xff1a;http://www.jexchen.com 大家都知道&#xff0c;我们在编写Flex应用程序时&#xff0c;通常是以<mx:Application>标签作为开头&#xff0c;实际上&#xff0c;Flex应用程序在启动运行的时候并不是直接从Application开始运行&#xff0c;在这之前还有一部…

Matlab编程与数据类型 -- 分支条件选择语句if/end

本微信图文详细介绍了Matlab中if/end分支条件选择语句。

插槽 查看硬盘状态_摄影路上的“全能”伴侣 | LaCie DJI Copilot 移动硬盘

照片的安全是摄影人不得不考虑的问题&#xff0c;尤其是长时间外出拍摄时&#xff0c;一旦出现意外&#xff0c;比如存储卡损坏或丢失&#xff0c;那么千辛万苦拍摄的照片将付之东流&#xff0c;造成无法挽回的损失。虽然意外发生的概率并不高&#xff0c;但是为了保险起见&…

【转载】C语言变量详解

原链接&#xff1a;http://gaga.yo2.cn/articles/detailed-c-language-variables-review.html 刚做题时发现全局变量会自动初始化&#xff0c;如int型则自动初始化为0&#xff0c;double则初始化为0.000000....。而局部变量如果没有初始化的话&#xff0c;初值为一随机数。于是…

Matlab编程与数据类型 -- 多分支条件选择语句if/elseif/…/else/end

本微信图文详细介绍了Matlab中if/elseif/…/else/end多分支条件选择语句。

图解c/c++多级指针与“多维”数组

2019独角兽企业重金招聘Python工程师标准>>> 前言 指针与数组是C/C编程中非常重要的元素&#xff0c;同时也是较难以理解的。其中&#xff0c;多级指针与“多维”数组更是让很多人云里雾里&#xff0c;其实&#xff0c;只要掌握一定的方法&#xff0c;理解多级指针和…

信科c语言实验程序修改题_豆瓣评分 9.3,史上最好的 C 语言著作,竟然翻车了.........

上周&#xff0c;在小编的各种努力下(省略一万字)&#xff0c;Kindle 官方终于答应给我一个广告位了。虽然只是开机屏&#xff0c;但我还是笑出了猪叫&#xff0c;毕竟上一次有这待遇还是 2018 年时的《算法图解》。所以错过了上次&#xff0c;这次我一定要亲眼见证这个时刻。我…

Nodejs Express dockerfile最佳实践

少啰嗦&#xff0c;先看代码 package.json {"name": "xxx","version": "0.0.0","private": true,"scripts": {"start": "node ./bin/www","forever": "node_modules/forever/…

Matlab编程与数据类型 -- 开关语句switch/end

本微信图文详细介绍了Matlab中switch/end开关语句。

安装ATi显卡驱动后增加的鼠标右键菜单的清理

一般最直接的方法是&#xff1a;一般位于注册表的&#xff1a;删除注册表HKEY_CLASSES_ROOT\Directory \Background\shellex\ContextMenuHandlers\ACE下 ab默认{5E2121EE-0300-11D4-8D3B-444553540000}办法一&#xff1a;刚才有朋友询问了ATi显卡在安装CATALYST Control Center…

15crmo焊接后多长时间探伤_15CrMo十五铬钼属于合金钢?、下面来解释一下

15CrMo十五铬钼属于合金钢​&#xff0c;主要用于石油、石化、高压锅炉等&#xff0c;专门用途的无缝管有锅炉用无缝管、地质用无缝钢管及石油用无缝管等多种。​一、15CrMo化学成分&#xff1a;C:0.12-0.18 Mn&#xff1a;0.40-0.70 Si&#xff1a;0.17-0.37 Cr&#xff1a;0.…