一、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,指的是实例对象
  • 如果对象的方法里面包含thisthis的指向就是方法运行时所在的对象。该方法赋值给另一个对象,就会改变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]面向对象编程的更多相关文章

  1. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  2. Js面向对象编程

    Js面向对象编程 1.     什么是面向对象编程? 我也不说不清楚什么是面向对象,反正就那么回事吧. 编程有时候是一件很快乐的事,写一些小游戏,用编程的方式玩游戏等等 2.     Js如何定义一个 ...

  3. js原生设计模式——3简单工厂模式\js面向对象编程实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. JS面向对象编程(进阶理解)

    JS 面向对象编程 如何创建JS对象 JSON语法声明对象(直接量声明对象) var obj = {}; 使用 Object 创建对象 var obj = new Object(); JS对象可以后期 ...

  5. 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  6. js面向对象编程 ---- 系列教程

    原 js面向对象编程:数据的缓存 原 js面向对象编程:如何检测对象类型 原 js面向对象编程:if中可以使用那些作为判断条件呢? 原 js面向对象编程:this到底代表什么?第二篇 原 js面向对象 ...

  7. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

  8. JS面向对象编程,对象,属性,方法。

    document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v ...

  9. js面向对象编程(第2版)——js继承多种方式

    附带书籍地址: js面向对象编程(第2版)

  10. 原生js面向对象编程-选项卡(自动轮播)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Web开发中的18个关键性错误

    前几年,我有机会能参与一些有趣的项目,并且独立完成开发.升级.重构以及新功能的开发等工作. 本文总结了一些PHP程序员在Web开发中经常 忽略的关键错误,尤其是在处理中大型的项目上问题更为突出.典型的 ...

  2. 简单几招,解决jQuery.getJSON的缓存问题

    今天做测试工作,发现了一个令我费解的问题,jquery的getJson方法在firefox上运行可以得到返回的结果,但是在ie8上测试,竟发现没有发送请求,故不能取到任何返回的结果,经历了一翻周折,找 ...

  3. 【译】第三篇 Integration Services:增量加载-Adding Rows

    本篇文章是Integration Services系列的第三篇,详细内容请参考原文. 增量加载是什么增量加载仅加载与先前加载差异的.差异包括:->新增的行->更新的行->删除的行通过 ...

  4. Rico Board.1.环境配置

    1.搭建开发环境 1.解压文件 sudo tar -jvxf gcc-linaro-arm-linux-gnueabihf-4.7-2013.03-20130313_liunx.tar.bz2 -C ...

  5. git checkout 命令详解【转】

    转自:http://www.cnblogs.com/hutaoer/archive/2013/05/07/git_checkout.html 在日常的git操作中,git checkout——检出,是 ...

  6. cout如何输出十六进制

    http://blog.csdn.net/okadler0518/article/details/4962340 cout<<hex<<i<<endl; //输出十 ...

  7. nvm npm node.js的关系

    nvm   npm  node.js都是用来构建reactNativ的项目 nvm管理node.j和npm版本的 node.js管理reactNative开发中所需要的代码库的 npm管理对应node ...

  8. python网络编程--线程GIL(全局解释器锁)

    一:什么是GIL 在CPython,全局解释器锁,或GIL,是一个互斥体防止多个本地线程执行同时修改同一个代码.这把锁是必要的主要是因为当前的内存管理不是线程安全的.(然而,由于GIL存在,其他特性已 ...

  9. Nginx - 压缩模块

    1. 前言 在 Nginx 中与网页压缩相关的模块有两个:一个是 HttpGzipModule,另一个是 HttpGzipStaticModule.前者用于启用在文件传输过程中使用 gzip 压缩,而 ...

  10. xgboost gbdt特征点分烈点

    lightGBM与XGBoost的区别:(来源于:http://baijiahao.baidu.com/s?id=1588002707760744935&wfr=spider&for= ...