js面向对象
- 什么事面向对象
- 用对象的思想去写代码,就是面向对象编程
- 面向对象编程(OOP)的特点
抽象:抓住核心问题
封装:只能通过对象来访问方法
继承:从已有对象上继承出新的对象
多态:多对象的不同形态
- 对象的组成
- 属性——对象下的变量
- 方法——对象下的函数
- this指向
- 指的是该方法的调用对象
- 工厂方式
- 面向对象中的封装函数
- 当new去调用一个函数:这个时候函数中的this指向该函数对象,并且会隐式返回该函数对象。(相当于新创造的对象,不依附于任何其它对象)
- new后面的函数就叫做构造函数
- !关于new与this的关系:实际上new后面调用的函数是一种特殊的函数叫做构造函数,用于创建一个对象,但是new的语法规定构造函数中的this就是将要创建的对象,因此直接用this指代对象而没有必要重新创建一个对象(var obj= new Object()),并且为了简化构造函数,语法中同时规定构造函数执行完会自动返回this,即自动返回创建出来的对象;所以说在构造函数中,this的使用节省了对象的创建,而new的使用节省了对象的返回;
- 对象类型的引用
- 基本类型(数字,字符,布尔值):赋值的时候是值得复制;
- 对象类型:赋值操作实际上是引用的传递,多个对象公用一个地址;
- 通过a=[];这种形式赋值那么必定会建立一个新地址。
- 在构造函数中创建的对象方法每new出一个新的对象调用该方法都会在内存中生成一份新的方法,所以重复创建对象会使得构造函数中的对象方法重复被创建,占内存拖累性能。
- 原型
- 将方法写到原型中而不是写到构造函数中,可以避免方法的重复创建。
- 去改写对象下面公用的方法或者属性,让公用的方法或者属性在内存中只存在一份(提高性能)。
- 原型要写在构造函数的后面,this指向该构造函数对象。
- 优先级原型要低于普通写法。
- 面向对象的改写原则
先写出普通的写法,然后改成面向对象写法
将局部变量改为全局变量
尽量不要出现函数嵌套函数
把onload中不是赋值的语句放到单独initial()函数中
改成面向对象
全局变量就是属性
函数就是方法
Onload中创建对象
改this指向问题
- 事件函数中ev的处理
- 基本类型都有自己的包装对象
- String
- Number
- Boolean
- 基本类型没有属性和方法,而是隐式调用了各自对应的包装对象,所以要给基本类型添加方法或者属性,要加在其包装对象上。
- 当基本类型调用其对应的包装对象下的方法的时候,基本类型会找到对应的包装对象类型,然后包装对象吧所有的属性和方法给了基本类型,然后包装对象消失。
- 原型链
- 实例对象与原型之间的链接
- _proto_ (隐式链接)
- 最外层原型链:Object.prototype;(优先级从内向外,普通写法的优先级最高)
面向对象的一些属性和方法
- hasOwnProperty:看是不是对象自身下面的属性;此方法在最外层object.prototype.hasOwnProperty;
- constructor:查看对象的构造函数;每一个函数都会自动生成的;fn.prototype.constructor=fn;
- 原型的赋值如果用json的形式,需要手动加上constructor的指向,否则默认生成的constructor会被覆盖;
- Aaa.prototype.name='xioaming';Aaa.prototype.age=20;//这种方法相当于添加属性;
- Aaa.prototype={name:'xiaoming',age:20};//相当于赋值,原有的prototype会被覆盖,所以系统自动生成的constructo也会一并被覆盖;应该手动添加Aaa.prototype={constructor:Aaa,name:'xiaoming',age:20}
- constructor系统自动添加的,for in循环不到,即使是手动添加constructor也不行;
- arr.constructor==Array //判断数据类型(跨页面的情况下会失效,例如ifream中的类型判断)
- instanceof : 运算符
对象与构造函数是否在同一个原型链上。
- 原型的赋值如果用json的形式,需要手动加上constructor的指向,否则默认生成的constructor会被覆盖;
- arr instanceof Array //判断数据类型(跨页面的情况下会失效,例如ifream中的类型判断)
- toString:改变数据类型,或者将数字变成任意进制。
- alert(Object.prototype.toString.call(arr)=='[object,Array]'); //靠谱的判断对象类型的方法
- arr.toString();//数组转成字符串;
- num.toString(16);//数字转成任意进制;
- 位置:系统对象自身的原型下都自带toString;自己写的对象是通过原型链找到object原型下的toString
- 对象的继承
- 在原有对象的基础上,略作修改,得到一个新的对象 不影响原有对象的功能
- 如何添加继承
- 属性的继承:调用父类的构造函数,通过 call 修改this指向。
- 方法的继承:
- 类式继承(一行代码的继承方式)直接将父类的原型对象赋给子类的原型对象。CreateStar.prototype=CreatePerson.prototype;(但这种方式会造成对象的引用,修改子类会改变父类,可以通过将属性与方法分开进行继承的方式进行继承)
- 利用for in 进行拷贝继承。//靠谱的属性继承方式
- 对象属性通过call方法直接拷贝到子对象上;
- 原型上的方法通过for in循环拷贝到子对象的原型链上(函数比较特殊的一种对象,函数的赋值不是引用而是像基本类型一样直接在内存中复制了一份,所以不会因为赋值后的函数被修改影响到赋值前的函数)
- 用到的函数extend()
function extend(obj1,obj2){
for( attr in obj2 ){
obj1[attr] = obj2[attr];
}
}- 原型继承
- 组件的开发
- 面向对象的深入应用(UI组件,功能组件)
- 将配置参数,方法,事件,三者进行分离
- 创建自定义事件
- 有利于多人协作开发代码
- 如何去挂载自定义事件与事件函数
js面向对象的更多相关文章
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
- JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- js面向对象的实现(example 二)
//这个方法和上篇文章(js面向对象的实现(example 一))中的方法类似,但是更为简洁 //通过函数赋值的方式来构造对象 //同样通过闭包的方式来封装对象及内部变量 (function () { ...
- 浅谈JS面向对象之创建对象
hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...
- js面向对象,有利于复用
需求:在网页上添加个天气预报. 以前总是在需要执行js的地方,直接写function(){}.在需要同样功能的地方直接copy,或者稍微修改. 然后在网上看看有没有好点的方法,然后就看到js面向对象编 ...
- JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)
函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) { return i1 + i2;//如果不写return返回 ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
随机推荐
- [LeetCode] Contains Duplicate III 包含重复值之三
Given an array of integers, find out whether there are two distinct indices i and j in the array suc ...
- echart折线图小知识
1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 var selected = {}; sel ...
- 一个简单oop的changeTab
好多地方都会用到这样一个效果“点击tab切换内容页”,根据自己的想法实现了一下,写了个简单的插件.以前写代码都是标准的函数式编程,现在觉得面向对象编程看起来比较爽,并且更容易维护,于是就用oop的思想 ...
- Node中的定时器详解
在大多数的业务中,我们都会有一些需求,例如几秒钟实现网页的跳转,几分钟对于后台数据进行清理,node与javascript都具有将代码延迟一段时间的能力.在node中可以使用三种方式实现定时功能:超时 ...
- Android开发工具: AS, Gradle, Git等
(一)史上最详细的Android Studio系列教程 你还没有使用Android Studio + Gradle么?那就有点太落伍了,下面自己原创总结了Android Studio的一系列教程,图文 ...
- oschina代码仓库远程push,pull免密实操总结
刚做项目,用到开源中国(oschina)的git仓库,一个多月一直在痛苦的反复输密码的过程中度过.中间配置过几次免密登录,但总是时而登的上去,时而不行,大多数情况不行.近几日项目做完了,正好有空把这个 ...
- C#并发编程
并发编程,一直是小白变成(●—●)的一个坎.平时也用到过不少并发编程操作,在这里进行一下记录. 多线程并不是唯一 并发:同时做多件事情. 多线程:并发的一种形式,采用多线程来执行程序. 并行处理:把正 ...
- css3 背景渐变
本来想先瞎扯些什么,然后又不知道讲什么的好,那就直接进入正题吧. 参考资料: Using CSS gradients (以及该页面内的大部分链接页面的资料) 首先区分下,平常给的纯色backgrou ...
- note
John的博客 http://blog.sina.com.cn/chinatownjohn 剑4-11真题+新东方pdf,王陆语料库(听力)+顾家北手把手教你写剑9版(写作)+人人雅思哥记忆卡(口语) ...
- CSS-学习笔记三
绝对定位:1. 脱离了文档流,没有浮动效果2. 默认情况下,设置了绝对定位的块,它的Top,left是相对于浏览器的3. 当给设置了绝对定位的块的父元素设置定位的时候(绝对.相对.固定), 那么 ...