js 之面向对象
对象 是什么?
对象就是一个整体,对外提供一些操作,比如:电视机(不用知道内部的构造,只知道怎么用)
面向对象 是什么?
使用对象时,只关注对象提供的功能,不关心内部细节,比如:操作电视机(只知道用遥控器控制)
JS的面向对象
特点:
1.抽象:抓住问题的核心
2.封装:不考虑内部细节,只考虑外部使用
3.继承:从已有的对象上,继承新的对象
·多重继承
·多态(少用)
对象的组成: | var cat = {
1.属性(变量) | cat.name = '小妮'; //属性
2.方法(函数) | cat.show= function(){ //方法
| alert('喵喵');
| }}
一、原始的对象
var cat1 = new object();
cat1.name="小妮";
cat1.show = function(){
alert('我的名字叫:'+this.name)
};
var cat2 = new object();
cat2.name="小明";
cat2.show = function(){
alert('我的名字叫:'+this.name)
}; //调用
cat1.show(); //我的名字叫:小妮
cat2.show(); //我的名字叫:小明
这时候如果想创建多一个对象,需要把上面的整个copy多一次,但这造成很多重复,超级乱。所以有了第二种进阶,构造函数
二、构造函数
function Cat(name){
var cat = new object();
cat.name=name;
cat.show = function(){
alert('我的名字叫:'+this.name);
};
rerurn cat;
} //调用
var cat1 = Cat('小妮');
cat1.show(); //我的名字叫:小妮
var cat2 = Cat('小明');
cat2.show(); //我的名字叫:小明
然而这种方式有个很大的缺点
alert(cat1.show == cat2.show); //false
这就意味着,每一个新创建的对象都拥有自己的一个方法,尽管方法是一模一样的。这件造成很大的浪费,占据资源。所以有了第三种Prototype模式
三、Prototype模式
首先说一下什么是prototype?
.box{color:"#white";} <div class="box" style="color:#blue"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div> //相信会点CSS的人也知道,第一个颜色因为行间样式变成blue,其与三个是white,原型的对应关系如下 // CSS JS
// class(一次给一组加样式) 原型
// style(一次给一个加样式) 给对象单独加事件
再来点JS例子:
var arr1 = new Array(1,2,3,4);
var arr2 = new Array(5,6,7,8); Array.prototype.sum = function () { //class方法 全部都有
//arr1.prototype.sum = function () { //style 行间 只有一个有
var result = 0;
for (var i = 0; i < this.length; i++) {
result += this[i];
}
return result;
}; alert(arr1.sum());
alert(arr2.sum());
如果用 arr1.prototype.sum arr2也要调用sum 将会报错,当加在Array共有的类上,才能共享。
同时要注意prototype是加在类上,方法是被对象调用
//错误: Array.push();
//错误: new arr();
//正确: arr.push();
//正确: Array.arr()
言归正传,上面的例子改写为:
function Cat(name){
this.name=name;
}
Cat.prototype.show = function(){
alert('我的名字叫:'+this.name);
};
//调用
var cat1 = new Cat('小妮');
var cat2 = new Cat('小明'); cat1.show(); //我的名字叫:小妮
cat2.show(); //我的名字叫:小明 alert(cat1.show == cat2.show );//true
构造函数加属性,原型加方法,这样就解决了资源浪费。
以上就是一个面向对象的写法。
更新待续.......
js 之面向对象的更多相关文章
- JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[1]--(理解对象和对象属性类型)
一.介绍 老铁们,这次是JS的面向对象的编程OOP(虽然我没有对象,心累啊,但是可以自己创建啊,哈哈). JS高程里第六章的内容,这章内容在我看来是JS中很难理解的一部分.所以分成三篇博客来逐个理清. ...
- JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)
一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)
一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)
一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...
- JavaScript基础笔记(四) JS式面向对象
JS式面向对象 一.理解对象 一)属性类型 ECMA-262 第 5 版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征. ECMA-262 定义这些特性是为 ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[1]--(理解对象和对象属性类型)
一.介绍 老铁们,这次是JS的面向对象的编程OOP(虽然我没有对象,心累啊,但是可以自己创建啊,哈哈). JS高程里第六章的内容,这章内容在我看来是JS中很难理解的一部分.所以分成三篇博客来逐个理清. ...
- 学JS的心路历程-JS支持面向对象?(一)
昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...
- 探讨 JS 的面向对象中继承的那些事
最近学了 JS 的面向对象,这篇文章主要是探讨 JS 的面向对象中继承的那些事. JS中继承的特点: 1.子类继承父类: 2.子类可以用父类的方法和属性 3.子类的改变可以不影响父类 下面用一个例子来 ...
- 重学前端--js是面向对象还是基于对象?
重学前端-面向对象 跟着winter老师一起,重新认识前端的知识框架 js面向对象或基于对象编程 以前感觉这两个在本质上没有什么区别,面向对象和基于对象都是对一个抽象的对象拥有一系列的行为和状态,本质 ...
随机推荐
- qemu的device参数解释 包括socket的一些知识
前面一片是driver,是把这个新的设备“插入到虚机中”,device 是准备驱动了.device 都是和设备配合使用的.要怎么去驱动一个设备,包括使用的驱动函数是啥,device后面的函数根据驱动的 ...
- SQL SERVER 实用命令集锦
1.根据关键字查询库中的存储过程,返回符合条件的存储过程名称 select distinct object_name(id) from syscomments where id in (select ...
- oracle或mysql定时增量更新索引数据到Elasticsearch
利用kettle Spoon从oracle或mysql定时增量更新数据到Elasticsearch https://blog.csdn.net/jin110502116/article/details ...
- 2017 Multi-University Training Contest - Team 3 RXD and dividing(树)
题解: 其实贪心地算就可以了 一个最优的分配就是每条边权贡献的值为min(k, sz[x]),sz[x]是指子树的大小 然后最后加起来就是答案. #include <iostream> # ...
- [CF45G]Prime Problem
题目大意:将$1$到$n(1<n\leqslant6000)$分成若干组数,要求每组数的和均为质数,若存在一种分配方式,输出每个数所在的组的编号,有多组解输出任意一组解,若不存在,输出$-1$ ...
- [LG1886]滑动窗口 单调队列
---题面--- 题解: 观察数据范围,这应该是一个复杂度O(n)的题.以最大值为例,考虑单调队列,维护一个单调递减的队列.从前向后扫,每次答案取队首,如果后面进入的比前面大,那么就弹出前面的数,因为 ...
- 用JavaScript写一个类似PHP print_r的函数
PHP print_r的函数很好用,可以用来打印数组.对象等的结构与数据,可惜JavaScript并没有原生提供类似的函数.不过我们可以试着自己来实现这个函数,下面提供一些方法与思路. 方法一 fun ...
- 几个JQuery解析XML的程序例子
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script ty ...
- sqrti128
求平方根下取整,对于gcc type __uint128_t. ~45.5ns/op on i7-7700k@4.35G,即typical <200cyc/op. Together with u ...
- php getimagesize()函数获取图片宽度高度
//php自带函数 getimagesize() $img_info = getimagesize('tomener.jpg'); echo '<pre>'; print_r($img_i ...