[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,去构造实例的实例
最新文章
- angular中的$q.defer()服务异步处理
- 解决VS2008 开发Windows Mobile 项目生成速度慢的问题(转)
- 文件上传漏洞演示脚本之js验证
- 鸟哥的linux私房菜学习记录之bash
- unity, 读写xls
- 【转】ExcelHelper类,用npoi读取Excel文档
- Server.Transfer方法,Server.Execute方法和Response.Redirect方法有什么异同
- Python3.5入门学习记录-列表、元组、字典
- SSIS:捕获修改了的数据
- 如何查看.Net源代码vs版本号以及C#项目中各文件的含义
- VBA /VB/VB中合成分散数据方法
- 【Hdu3652】B-number(数位DP)
- [JSON] 前后台如何通过$.ajax()传输JSON数据
- WPF编程,通过DoubleAnimation控制图片的透明度,将重叠的图片依次显示。
- 推荐一款编辑SQL的工具:jsqlparser
- 微信小程序scroll-view横向滚动
- so加载报错:dlopen failed: couldn&#39;t map ... Permission denied
- 【NXP开发板应用—智能插排】4. PWM驱动
- [Leetcode] LRU 算法实现
- R:安装、导入各种包。
热门文章
- Seven Techniques for Data Dimensionality Reduction
- 不用 Twitter Bootstrap 的5个理由
- bzoj 5055: 膜法师——树状数组
- Spring---七大核心模块
- 使用solr批量导入mysql数据库,以及Unable to read: dataimport.properties等坑
- aarch64_m1
- mysql5.7半自动同步设置【转】
- C#基础学习之FileStream
- sicily 1231. The Embarrassed Cryptography
- HDU 6215 2017Brute Force Sorting 青岛网络赛 队列加链表模拟