javaScript面向对象是什么?(一)
js就是个面向对象语言,一切皆对象
一、什么是面向对象?
简单点,就这么说吧。生活中有一些个物品,譬如(哈哈,还想起个譬如)说一个iPhone,我们也不知道里面的工作原理吧?但是咱们会按按钮呀,用一俩天就会用了, oh my god,不知道原理就会用,好厉害。
那么javaScrip中的自带方法Date对象都知道吧, 这兄弟有个儿子(闺女也行,你说什么就是什么)getMonth的方法,那你知道它是怎么知道现在是哪个月吗?不知道。管他呢,但是me会用
其实呢,我们不需要知道原理就可以用它的功能,就是面向对象。
其实对象就是一个整体,对外提供一些功能和操作,而你不知道它内部是怎么操作的。在编程中我们叫面向对象,在生活中也有,但是叫法不一样
在编程中,就像jQuery,你知道它的$('div') 怎么获取到的DOM对象吗,不知道。(‘’我知道‘’,‘去一边去,你是看了源码。你拆机了,你能不知道?’)只要知道它干嘛的就行,那他是不是面向对象编程的呢?
二、面向对象特点
1、抽象:抽指把核心的东西抽出来,把与我们要解决的问题有关的东西拿出来摆在面前
2、封装:让使用对象的人不考虑内部实现,只考虑功能使用 把内部的代码保护起来,只留出一些个api接口供用户使用
3、继承:就是为了代码的复用,从父类上继承出一些方法和属性,子类也有自己的一些属性
4、多态:实际上是不同对象作用与同一操作产生不同的效果。多态的思想实际上是把“想做什么”和“谁去做“分开
三、对象的组成
1、方法 函数:过程、动态的
2、属性 变量:状态、静态的
四、this 当前的方法属于谁就是谁
例如点击事件里的this,其实就是触发事件的那个dom对象的onclick方法里的this,当然是人家自己咯
再比如说一个函数里的this,这个函数都属于window的一个方法,当然里面的this也是window咯
还有哦,不要在系统对象上面添加属性和方法,这样不太好
那么在谁身上加呢?在object这个对象身上,别的date呀array呀,这些对象都是有一些个好玩的功能的,
object也就自己最强大的一个功能就是,没有功能~~~~ 这样咱们就可以随意给他加属性和方法而不用去想会不会覆盖了
五、创建对象的方法
1、最基础的
var obj = new Object()
obj.name = 'shizhikai'
obj.age = '3岁'
obj.showAge = function(){
console.log(this.age) //这个this是谁?知道吗? obj
}
但是这样太麻烦,我要写100个人,那得写100次。有别的方法吗?有
2、工厂方式 通过构造函数
function createPerson(name,age){
// 原料
var obj=new Object();
// 加工
obj.name=name;
obj.age=age;
obj.showAge=function() {
alert(this.age)
}
// 出厂
return obj;
}
var obj1=createPerson("shizhikai",'3岁')
var obj2=createPerson("ni",'18岁');
alert(obj1.showName)//function(){alert(this.name)}
alert(obj2.showName)//function(){alert(this.name)}
结果都一样但是比较一下:
console.log(obj1.showName==obj2.showName) //false
这里居然是不一样!!这样的话那我一百个对象就有一百个不一样的方法要占用内充~~~~
也就说会有两种问题:1. 创建对象没有用到new 感觉心里空落落的 2. 方法都不一样的话太占据空间了~~~~
那就去解决
function createPerson(name,age){
// 原料 系统偷偷摸摸做的
// var this=new Object();
// 加工
this.name=name;
this.age=age;
this.showName=function() {
alert(this.name)
}
// 出厂 系统偷偷摸摸做的
// return this;
}
var obj1=new createPerson("shizhikai",'3岁')
var obj2=new createPerson("ni",'18岁');
这样的话代码又少了很多,很爽,而且还有new了,其实就是利用了一个概念,任何函数都可以new一下
譬如
function aa(){}
console.log(new aa()) //Object
那它就变成对象啦,那它里面的this就是它new出来的自己啦~~~~
但是这样还是有一个问题,
console.log(obj1.showName==obj2.showName) //false
还要占内存
那继续解决
这里就要用到面向对象中不得不说的,而且很重要的的东西.prototype 原型~~~
六、.prototype
先来看个例子,比如说有两个熊,熊大、熊二去偷了同一颗苹果树上的蜂蜜窝,熊大偷了后又拿了个苹果,熊二看见熊大有苹果就不干了,去找苹果树的理论,为什么他
有我没有,这就不讲道理了吧,毕竟熊大那个苹果是自己顺便拿的,熊二当然没有了,但是如果说蜂蜜窝就在苹果上面筑的巢话,这样熊大就不用去拿苹果了,直接全窝端,哈哈哈。俩只熊都有了呢,皆大欢喜。
var xiong1=[1,2,3];
var xiong2=[4,5,6];
xiong1.sum=function(){
var result=0;
for(var i=0;i<this.length;i++){
result+=this[i]
}
return result;
}
alert(xiong1.sum()) //
alert(xiong2.sum()) //error
就像这个例子,xiong2根本没有这个方法嘛,想要的话,只能自己去添加咯,再写一遍
xiong2.sum=function(){
var result=0;
for(var i=0;i<this.length;i++){
result+=this[i]
}
return result;
}
这样还是麻烦,占内存
var xiong1=[1,2,3];
var xiong2=[4,5,6];
Array.prototype.sum=function(){
var result=0;
for(var i=0;i<this.length;i++){
result+=this[i]
}
return result;
} alert(xiong1.sum()) //
alert(xiong2.sum()) // function createPerson(name,age){
this.name=name;
this.age=age;
}
createPerson.prototype.showAge=function(){
this.showAge=function() {
console.log(this.age)
}
}
那么上一个知识点的那两个问题可就都解决了哦~~~
这样也就发展出一个广泛的一个写法了哦
用构造函数去写自有属性和方法,用原型去写共有的属性和方法,这种方式叫混合方式
那么面向对象说完没?没有,下节再看吧。我吃饭去了。。。。。。。。。。
javaScript面向对象是什么?(一)的更多相关文章
- JavaScript学习笔记(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- JavaScript学习总结(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇
Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...
- javascript面向对象系列第四篇——选项卡的实现
前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...
- javascript面向对象系列第三篇——实现继承的3种形式
× 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...
- javascript面向对象系列第一篇——构造函数和原型对象
× 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...
- Javascript面向对象(封装、继承)
Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...
- 《javascript面向对象精要》读书笔记
<javascript面向对象精要> 买这本书的原因主要是因为作者,Nicholas C. Zakas 牛X闪闪的js专家,读过js高程的应该都知道他,而这本书是他的最新力作,感觉也是js ...
- 【转】javascript面向对象编程
摘要:本文本来是想自己写的,奈何花了好长时间写好之后忘记保存,还按了刷新键,一键回到解放前,索性不写了,所以本文是转载的. 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化. ...
- javascript面向对象(一):封装
本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学 ...
随机推荐
- 20144303石宇森《网络对抗》MSF基础应用
20144303石宇森<网络对抗>MSF基础应用 实验后回答问题 一.解释什么是exploit,payload,encode: 我认为exploit就是一个简单的攻击指令,就是对配置所有设 ...
- STM32.printf
printf("\r\n this is a usart printf demo \r\n"); Use Micro LIB 需要勾选这个库 将串口定义成 printf 函数 #i ...
- Python3基础 os listdir curdir pardir 查看工作目录及其上一级目录的所有文件名
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- jz2440移植QT5.6【学习笔记】【原创】
平台:jz2440 作者:庄泽彬(欢迎转载,请注明作者) 交叉编译工具:arm-linux-gcc (GCC)4.4.3 linux:linu3.4.2 PC环境:ubuntu18.04 一.修改/o ...
- jQuery:ajax处理html页面
源码: $.ajax({ url: url, success: function (data) { var reg = /<body>[\s\S]*<\/body>/g; ]; ...
- hdu 3874(树状数组)题解
Problem Description Mery has a beautiful necklace. The necklace is made up of N magic balls. Each ba ...
- 手机常用meta标签-有注释
<!-- 设置字体编码 --> <meta charset="UTF-8"> <!-- 视图窗口,移动端特属的标签. --> <meta ...
- guulp配置编译ES6
下面是gulp的配置文件,gulp具体使用点击查看 首先全局安装下 cnpm install gulp -g gulpfile.js gulp配置文件 var gulp = require(&quo ...
- [Redis] - 高并发下Redis缓存穿透解决
高并发情况下,可能都要访问数据库,因为同时访问的方法,这时需要加入同步锁,当其中一个缓存获取后,其它的就要通过缓存获取数据. 方法一: 在方法上加上同步锁 synchronized //加同步锁,解决 ...
- POJ 3667 Hotel(线段树+区间合并)
http://poj.org/problem?id=3667 题意: 有N个房间,M次操作.有两种操作(1)"1a",表示找到连续的长度为a的空房间,如果有多解,优先左边的,即表示 ...