面向对象：
--JS系统对象也是基于原型的程序
--不要修改或者添加系统对象下面的方法和属性
eg:

 var arr = [1,2,3];

 Array.prototype.push = function() {};

 arr.push(4,5,6);

 alert( arr );//1,2,3;push方法空无法添加

 //push:方法的封装

 var arr = [1,2,3];

 Array.prototype.push = function() {

 　　for(var i=0;i<arguments.length;i++) {

 　　　　this[this.length] = arguments[i];

 　　}

 　　return this.length;

 };

 arr.push(4,5,6);

 alert( arr );

1.包装对象：基本的类型都有自己对应的包装对象：

String Number Boolean
Q1:str不是对象为何有一些方法？
字符串所对应的方法是在str的包装对象。
eg:
var str = 'hello';
str.chart(0);//基本类型会找到对应的包装对象，然后把包装对象的所有属性和方法给了基本类型，然后包装对象消失。
eg:
var str = 'hello';//基本类型
str.number = 10;
//在基本类型对应的包装类型下创建对象添加10，然后消失
alert(str.number);//undefined;str.number 又去创建对象，但找不到对应包装对象

2.原型链：
--实例对象与原型之间的链接(_proto_);
原型链的最外层是Object；

 function Aa() {};

 Object.prototype.num = 30;

 var a1 = new Aa();

 alert(a1.num);//

3.面向对象的一些属性和方法：

1).hasOwnProperty:对象自身下的属性，是在Object下面的属性。...alert( arr.hasOwnProperty(num) == Object.prototype.hasOwnProperty );//ture

 var arr = [];

 arr.num = 10;

 Array.prototype.num2 = 20;

 alert( arr.hasOwnProperty(num) );//ture;

 alert( arr.hasOwnProperty(num2) );//false;所有对象下的属性并不是arr下的属性

2).constructor:查看对象的构造函数

 function Aa() {}

 var a1 = new Aa();

 alert(a1.constructor);//函数

用来判断等:

var arr = [];
alert(arr.constructor == Array);//true;
如果写一个函数程序会自动添加一个原型的构造函数：Aaa.prototype.constructor = Aaa;
eg:

 function Aa() {}

 Aa.prototype.constructor = Array;

 var a1 = new Aa();

 alert(a1.constructor);//弹出Array函数

但实际不要改。。。

不经意间会修改constructor
eg:

 function Aa() {}

 1/*Aa.prototype.name = "Wunworld";

 Aa.prototype.age = 23;*/

 2/*Aa.prototype = {

 　　name : "Wunworld",

 　　age : 23

 }*/

 var a1 = new Aa();

 alert(a1.constructor);

 //两种结果完全不一样：1弹出函数，2弹出的是对象Object的函数，赋值修改了constructor。如果采用第二种写法在对象中要添加constructor的指向。

 Aa.prototype = {

 　　constructor : Aa,

 　　name : "Wunworld",

 　　age : 23

 }//这样不会修改。。

3)instancof:对象与构造函数在原型链上是否有关系(是不是在同一原型链上)

4)toString();系统对象下自带的，自己写的对象都是通过原型链找到Object下面的。
作用：1> 把对象转换成字符串

 var arr = [1,2,3];

 alert(arr.toString());//"1,2,3"

 var arr = [1,2,3];

 Array.prototype.toString = function(){

 　　return this.join("+");

 }

 alert(arr.toString());//"1+2+3"

2> 数字进制的转换：

 var num = 255;

 alert(num.toString(16));//FF var num = 255;

 alert(num.toString(16));//FF

3> 做类型判断

 var arr = [];

 alert(Object.prototype.toString.call(arr));[object Array]

 alert(Object.prototype.toString.call(arr) == "[object Array]");//true

判断一个对象的方法(3中);

 alert(arr.constructor == Array);//true

 alert(arr intanceof Array);//true

 alert(Object.prototype.toString.call(arr) == "[object Array]");//true

4.面向对象的继承：拷贝式继承

继承：在原有对象的基础之上，做一些修改，得到一个新的对象，不影响元有对象的功能。子类不影响父类，子类可以继承父类的一些功能，实现代码的复用。
属性的继承：调用父类的构造函数用.call改变this的指向。
方法的继承：父类的原型直接赋值（深赋值）该子类的原型，for in 拷贝继承

 function CreatePerson(name,sex) {//父类

 　　this.name = name;

 　　this.sex = sex;

 }

 CreatePerson.prototype.showName = function() {

 　　alert( this.name );

 }

 var person1 = new CreatePerson("xiaoming","男")；

 person.showName();

 function CreateStar(name,sex,job) {//子类

 　　CreatePerson.call(this,name,sex);//this指向window前面没调用对象,用call改变this的指向。

 　　this.job = job;

 }

 /*CreateStar.prototype = CreatePerson.prototype;*/ //引用类型，只要修改一个会影响另一个的值解决办法对象类型的深复制；

 extend(CreateStar.prototype, CreatePerson.prototype);//调用对象深复制函数

 var person2 = new CreatePerson("Wunworld","男","job");

 person2.showName();//继承过来了

 function extend(obj1,obj2){

 　　for(var attr in obj2) {

 　　　　obj1[attr] = obj2[attr];

 　　}

 }

案例之面向对象demo；

HTML：

 <style>

 *{margin:0;padding:0;}

 #div1{width:100px;height:100px;position: absolute;background:red;}

 #div2{width:100px;height:100px;position: absolute;left:100px;background:yellow;}

 </style>

 </head>

 <body>

 <div id="div1"></div>

 <div id="div2"></div>

 </body>
 function Drag(id) {

     this.obj = document.getElementById(id);

     this.disX = 0;

     this.disY = 0;

 }

 Drag.prototype.init = function() {

     var that = this;

     this.obj.onmousedown = function(ev) {

         var ev = ev || window.event;

         that.FnDown(ev);

         document.onmousemove = function(ev) {

             var ev = ev || window.event;

             that.FnMove(ev);

         }

         document.onmouseup = function() {

             that.FnUp();

         }

         return false;

     }

 }

 Drag.prototype.FnDown = function(ev) {

     this.disX = ev.clientX - this.obj.offsetLeft;

     this.disY = ev.clientY = this.obj.offsetTop;

 }

 Drag.prototype.FnMove = function(ev) {

     this.obj.style.left = ev.clientX - this.disX + "px";

     this.obj.style.top = ev.clientY - this.disY + "px";

 }

 Drag.prototype.FnUp = function() {

     document.onmousemove = null;

     document.onmouseup = null

 }

 function ChildDrag(id){

     Drag.call(this,id);//属性的继承

 }

 extend(ChildDrag.prototype,Drag.prototype);//方法的继承

 ChildDrag.prototype.FnMove = function(ev) {//方法的重写

     var L = ev.clientX - this.disX;

     var T = ev.clientY - this.disY;

     if(L<0) {

         L = 0;

     }else if(L > document.documentElement.clientWidth - this.obj.offsetWidth) {

         L = document.documentElement.clientWidth - this.obj.offsetWidth;

     }

     if(T < 0) {

         T = 0;

     }else if(T > document.documentElement.clientHeight - this.obj.offsetHeight) {

         T = document.documentElement.clientHeight - this.obj.offsetHeight;

     }

     this.obj.style.left = L + "px";

     this.obj.style.top = T + "px";

 }

 function extend(obj1,obj2){

     for(var attr in obj2){

         obj1[attr] = obj2[attr];

     }

 }

 var d1 = new Drag("div1");

 d1.init();

 var d2 = new ChildDrag("div2");

 d2.init();

5.继承的其他形式：
1).类式继承：利用构造函数继承
JS：是没有类的概念，把JS中的构造函数看作是类。属性和方法的继承要分开。
eg:

 function Aa(){//父类

 　　this.name = "Wunworld";

 }

 Aa.prototype.showName(){

 　　alert(this.name);

 }

 function Bb(){}//子类

 Bb.prototyppe = new Aa();//重点

 Bb.prototype.constructor = Bb;

 var b1 = new Bb();

 b1.showName();//子类继承了父类的方法和属性

通过创建父类的实例赋值给子类的原型，然后创建子类的实例，但这样做有问题，修改了b1的指向，alert(b1.constructor),时会弹出Aa();函数。所以在上述还要修改指向问题。

Bb.prototype.constructor = Bb;即可。但是，要区分开方法和属性的继承。

var F = function() {}

F.prototype = Aa.prototype;

Bb.prototyppe = new F();//重点

Bb.prototype.constructor = Bb;//以上是方法的继承

方法的继承原理：通过创建一个空构造函数，把父类的原型赋值给创建的构造函数的原型上，生成一个构造函数的实例赋值给子类的原型，再修改子类原型的构造指向即可。

子类的继承同样用 父类.call(this);

2).原型继承：借助原型来实现对象继承对象
eg:

 var a = {

 　　name : "Wunworld"

 }

 var b = cloneObj(a);

 alert(b.name);

 function cloneObj(obj) {

 　　var F = function(){};

 　　F.prototype = obj;

 　　return new F();

 }

原理：对象之间的继承，通过调用继承函数，继承函数的原理，利用空函数实现属性的赋值继承，通过原型链的访问实现继承。

三种继承的总结：
1.拷贝式继承：通用型，有没有new都可以使用
2.类式继承：利用new构造函数继承
3.原型继承：对象之间的继承

JS面向对象：的更多相关文章

  1. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

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

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

  3. JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  4. JS面向对象（2） -- this的使用，对象之间的赋值，for...in语句，delete使用，成员方法，json对象的使用，prototype的使用，原型继承与原型链

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  5. JS面向对象（1） -- 简介，入门，系统常用类，自定义类，constructor，typeof，instanceof，对象在内存中的表现形式

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  6. js面向对象的实现（example 二)

    //这个方法和上篇文章(js面向对象的实现(example 一))中的方法类似,但是更为简洁 //通过函数赋值的方式来构造对象 //同样通过闭包的方式来封装对象及内部变量 (function () { ...

  7. 浅谈JS面向对象之创建对象

    hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...

  8. js面向对象，有利于复用

    需求:在网页上添加个天气预报. 以前总是在需要执行js的地方,直接写function(){}.在需要同样功能的地方直接copy,或者稍微修改. 然后在网上看看有没有好点的方法,然后就看到js面向对象编 ...

  9. JavaScript基础精华02(函数声明，arguments对象，匿名函数，JS面向对象基础)

    函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) {             return i1 + i2;//如果不写return返回 ...

  10. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

随机推荐

  1. shell判断变量是字符还是数字

    ok,以后最好是每天一个shell小脚本吧,这样以后工作时还可以直接套用,嗯,比较不错,顺便还可以带给刚入门shell的朋友一些帮助,好了,废话不多说,下面是我两种判断的实现方式: 1.通过grep去 ...

  2. yes---重复输出指定的字符串

    yes命令在命令行中输出指定的字符串,直到yes进程被杀死.不带任何参数输入yes命令默认的字符串就是y. 语法 yes(参数) 参数 字符串:指定要重复打印的字符串. 实例 [root@localh ...

  3. fuser ---显示出当前程序使用磁盘上的某个文件

    fuser 可以显示出当前哪个程序在使用磁盘上的某个文件.挂载点.甚至网络端口,并给出程序进程的详细信息. fuser只把PID输出到标准输出,其他的都输出到标准错误输出. a 显示所有命令行中指定的 ...

  4. Spring学习总结（12）——Druid连接池及监控在spring配置

    Druid连接池及监控在spring配置如下: <bean id="dataSource" class="com.alibaba.druid.pool.DruidD ...

  5. MySQL auttoReconnect

    com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: The last packet successfully received from ...

  6. POJ——T 1182 食物链

    http://poj.org/problem?id=1182 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 77012   ...

  7. SICP 习题 （2.11）解题总结:区间乘法的优化

    SICP 习题 2.11又出现Ben这个人了,如曾经说到的,仅仅要是Ben说的一般都是对的. 来看看Ben说什么.他说:"通过监測区间的端点,有可能将mul-interval分解为9中情况, ...

  8. CSU1608: Particle Collider(后缀数组)

    Description In the deep universe, there is a beautiful planet named as CS on which scientists have d ...

  9. FragmentActivity+FragmentTabHost+Fragement替代TabActibvity+TabHost+Activity

    自Android3.2之后,TabActibvity被弃用(Deprecated).取而代之的是FragmentActivity.由于Fragment比Activiy更灵活.消耗的资源更小.全然可以满 ...

  10. poj--2391--Ombrophobic Bovines(floyd+二分+最大流拆点)

    Ombrophobic Bovines Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u ...