[js笔记整理]面向对象篇
一、js面向对象基本概念
对象:内部封装、对外预留接口,一种通用的思想,面向对象分析;
1、特点
(1)抽象
(2)封装
(3)继承:多态继承、多重继承
2、对象组成
(1)属性:
任何对象都可以添加属性,(如右侧示例可弹出arr.a为12 var arr=[1,2,3];arr.a=12;alert(arr.a)
全局变量是window的属性,
<script>
window.a=12;
window.onload=function()
{
alert(a);
}
</script>
(2)方法:
任何对象都可以添加方法;
全局函数为window的自定义方法;
事件函数为系统自动调用的方法;
(以下代码为为数组对象arr添加属性a和方法show,调用方法show弹出a属性)
<script>
var arr=[1,2,3];
arr.a=12;
arr.show=function()
{
alert(this.a);
}
arr.show;
</script>
3、this的使用
this表示拥有当前方法或者属性的对象;
(1)this的使用
- 全局环境使用
this
,它指的就是顶层对象window
- 构造函数中的
this
,指的是实例对象 - 如果对象的方法里面包含
this
,this
的指向就是方法运行时所在的对象。该方法赋值给另一个对象,就会改变this
的指向。
(2)绑定this的方法
函数实例的
call
方法,可以指定函数内部this
的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数apply
方法的作用与call
方法类似,也是改变this
指向,然后再调用该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数bind
方法用于将函数体内的this
绑定到某个对象,然后返回一个新函数
4.new的使用
(1)作用:示例化当前类为对象;
(2)动作流程:指向一个新创建的对象,并返回该对象;
(3)任何方法前都可以加new;
5、类和对象
(1)对象:类的实例化
(2)类:对象的模板
二、创建类
1、基本方法
(1)创建空对象 var obj=new Object();
(2)添加属性 obj.name="pangyongsheng"
(3)添加方法 obj.shuwname=function(){ alert(this.name)}
(4)调用属性 obj.name;
(5)调用方法 obj.showname();
2、构造函数:
以上基本方法可以封装成为一个函数--构造函数
function createObjiect(name,qq)
{
var obj=new Object(); obj.name=name;
obj.qq=qq;
obj.showname=function()
{
alert(obj.name);
}
retun obj;
}
采用构造函数创建对象:
var aa=creatObject("panyongsheng",820568018);
上述方法存在的问题和缺点:
(1)未采用new进行实例化-
(2)不同对象方法重复,浪费资源
3、使用new
(1)采用new创建构造函数,实现添加对象的属性
function CreateClass(a,b,c...)
{
this.a=a;
this.b=b;
...
}
(2)采用原型添加方法
CreatClass.prototype.fn1=function(){}
CreatClass.prototype.fn2=function(){}
...
----------------------------------------------------------------------------
关于原型:同时为多个对象添加相同的方法->提高资源重用
以为数组添加求和方法为例:
(1)对特点的数组添加sum方法,只能在当前数组使用
var arr1=[1,3,5,7];
var arr2=[2,4,6,8];
arr1.sum=function()
{
var result;
for(var i=1;i<this.length;i++)
{
result+=this[i];
}
}
arr1.sum1.sum();
arr1.suml.sum(); //报错
(2)通过原型添加sum方法,任何数组均可以使用该方法
Array.prototype.sum=function()
{
var result;
for(var i=1;i<this.length;i++) {
result+=this[i];
}
}
var arr1=[1,3,5,7];
var arr2=[2,4,6,8];
arr1.sum1.sum();
arr1.sum2.sum();
三、实现继承
1、继承属性
以下语句表示B函数继承A函数的属性
function B()
{
A.call(this);
}
2、继承方法
首先测试通过下方法来实现
B.prototype=A.prototype;
存在问题:
在继承后修改B函数方法,发现A函数方法也被同时修改;
分析原因:
js中通过对象给对象赋值是引用方式,不会创建新的空间,而是指向同一地址;
通过以下示例说明:
arr1=[1,2,3];
arr2=arr1;
arr2.push("a");
alert(arr1); //结果为 1 2 3 a
alert(arr2); //结果为1 2 3 a
改进为
for(var i in A.prototype)
{
B.prototype[i]=A.prototype[i];
}
---------------------------------------------------------------------------
对象分类
1、本地对象:js标准设置/如:object function、array、sting、boolean/
2、内置对象:math (不需要new,直接使用)
3、宿主对象:浏览器对象
---------------------------------------------------------------
四、原型及原型连的理解
1、 js中全部内容都是对象
即:(1)Object衍生而来
(2)原型连(__proto__)最终指向Object.prototype["constructor", "hasOwnProperty", "toLocale......]
(3)prototype 包含了2个属性,一个是constructor ,另外一个是__proto__
2、 构造函数与实例
构造函数通过定义prototype来约定其实例的规格, 再通过 new 来构造出实例, 他们的作用就是生产对象.
而构造函数(方法)本身又是方法(Function)的实例, 因此也可以查到它的__proto__(原型链)
Object / function F(){} 构造函数(类)
new Object() / new F() 实例
3、实例通过__proto__指向原型
4、不能为实例设置prototype,去构造实例的实例
[js笔记整理]面向对象篇的更多相关文章
- [js笔记整理]正则篇
一.正则基本概念 1.一种规则.模式 2.强大的字符串匹配工具 3.在js中常与字符串函数配合使用 二.js正则写法 正则在js中以正则对象存在: (1)var re=new RegExp(正则表达式 ...
- [js笔记整理]DOM 篇
一.节点类型 1.元素节点:HTML元素 2.文本节点:元素标签中的内容 3.属性节点:元素的属性 (检测节点类型:node.nodeType //元素=1,属性=2,文本=3) 二.使用DOM获取元 ...
- [js笔记整理]事件篇
一.事件流1.冒泡事件:从特定的事件到不特定事件依次触发:(由DOM层次的底层依次向上冒泡)(1)示例: <html onclick="add('html<br>')&qu ...
- JavaSE 基础习题整理 - 面向对象篇
大家好,今天空闲时间整理了一份JavaSE面向对象的常用习题,喜欢的朋友可以关注我.习题来自互联网,不喜勿喷 1.定义长方形类,含: 属性:宽.高(整型): 方法:求周长.面积: 构造方法3个:(1) ...
- 微信小程序笔记整理--入门篇。
7-2 微信小程序入门篇 准备篇 1.登录网址,https://mp.weixin.qq.com 注册一个微信小程序. 2.获取微信小程序appid,登录自己的小程序后台,在开发者设置中获得appid ...
- js 笔记整理
Js中for.for-in.forEach以及for-of的用法及特性对比 for-in for...in以任意顺序遍历一个对象的可枚举属性.所以for-in不适合用来迭代一个Array.同时,for ...
- JS第一周学习笔记整理
目录 JS正式课第一周笔记整理 JS正式课第一周笔记整理 webstorm : 代码编辑器 浏览器: 代码解析器: Git : 是一个工具;用于团队协作开发项目管理代码的工具:在工作中用git.svn ...
- Sass-学习笔记【基础篇】
最下边附结构图 在线编辑器网址如下:http://sassmeister.com/ 注意编写的时候,符号千万别用了中文的:.:.....之类的,会报错,Sass也转换不成css. less和sass ...
- JS知识点整理(二)
前言 这是对平时的一些读书笔记和理解进行整理的第二部分,第一部分请前往:JS知识点整理(一).本文包含一些易混淆.遗漏的知识点,也会配上一些例子,也许不是很完整,也许还会有点杂,但也许会有你需要的,后 ...
随机推荐
- TensorFlow anaconda命令备忘
[查看tensorflow安装的版本] anaconda search -t conda tensorflow [选择版本安装] conda install -c anaconda tensorflo ...
- iOS开发之CALayer
1. 概述 在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView,其实UIView之所以能显示在屏幕 ...
- Web服务器磁盘满故障深入解析
问题:硬盘显示被写满,但是用du -sh /*查看时占用硬盘空间之和还远小于硬盘大小即找不到硬盘分区是怎么被写满的. 今天下午接到一学生紧急求助,说生产线服务器硬盘满了.该删的日志都删掉了.可空间还是 ...
- dispaly属性,position属性
position:absolute;绝对定位相对于父元素(父元素设为relative) position:relative;相对定位相对于自己 position:fixed;固定定位相对于浏览器 di ...
- websocket 项目应用
序言 很早就想用起来websocket,可惜需要后台服务的支持,技术的翻新总会给我带来巨大的冲击,最近后端人员学习了websocket相关后台技术.于是我们开始动起来了. 学习 这位大兄弟的文章 h ...
- C语言 动态数组实现
一.概述 C语言是不能直接定义动态数组的,数组必须在初始化时确定长度. 如果要在程序运行时才确定数组的长度,就需要在运行的时候,自己去向系统申请一块内存用动态内存分配实现动态数组. 二.动态内存分配函 ...
- 老李分享:Web Services 特性 1
老李分享:Web Services 特性 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9 ...
- ReactJS入门3:组件的生命周期
本文主要介绍组件的生命周期. 组建的生命周期主要分为3个:Mounting.Updating.Unmounting. 1. Mounting:组件被加载到DOM 在本阶段,主要有三个方法: 1 ...
- css3hover效果
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- 关于苹果真机 getFullYear()返回值为NAN的问题
问题描述: 在html页面中获得后台传过来的一个时间并显示在页面上,我用getFullYear() ,getMonth(),getDate()分别获得了年月日在电脑上和三星手机上页面都能正确的显示时间 ...