面向对象：
--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. Linux和Windows系统的远程桌面访问知识（转载）

    为新手讲解Linux和Windows系统的远程桌面访问知识   很多新手都是使用Linux和Windows双系统的,它们之间的远程桌面访问是如何连接的,我们就为新手讲解Linux和Windows系统的 ...

  2. Rman备份异机恢复

    最后更新时间:2018/12/29 前置条件 已准备一台安装好Centos6+oracle11gr2 软件的服务器; 只安装了 oracle 数据库软件,需要手工创建以下目录: #环境变量 expor ...

  3. 【Codeforces Round #462 (Div. 1) B】A Determined Cleanup

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 设\(设f(x)=a_d*x^{d}+a_{d-1}*x^{d-1}+...+a_1*x+a_0\) 用它去除x+k 用多项式除法除 ...

  4. ECNUOJ 2149 华丽的队列

    华丽的队列 Time Limit:3000MS Memory Limit:65536KBTotal Submit:531 Accepted:68 Description  每年,都有很多新同学来到我们 ...

  5. 【转】 基于C#.NET的高端智能化网络爬虫

    [转] 基于C#.NET的高端智能化网络爬虫 前两天朋友发给我了一篇文章,是携程网反爬虫组的技术经理写的,大概讲的是如何用他的超高智商通过(挑衅.怜悯.嘲讽.猥琐)的方式来完美碾压爬虫开发者.今天我就 ...

  6. legend---二、如何降低编程复杂度

    legend---二.如何降低编程复杂度 一.总结 一句话总结:配置文件,数据库 个性的东西可以一起写入数据库,那么编程复杂度会大幅降低,页面灵活度也大幅降低(特有属性写进数据库) 比如不同难度的颜色 ...

  7. scikit-learn的线性回归

    scikit-learn的线性回归预测Google股票 这是机器学习系列的第一篇文章. 本文将使用Python及scikit-learn的线性回归预测Google的股票走势.请千万别期望这个示例能够让 ...

  8. MySQL Server 5.5.44免安装版配置详解

    转载地址:http://wenku.baidu.com/view/2a8bfe6a25c52cc58bd6beff.html### 一 下载MySQL http://dev.mysql.com/dow ...

  9. 学习总结--Dom

    节点(每个元素都会有的3个nodeValue nodeType nodeName:) 1 元素节点 nodeName 元素节点名 nodeType 1 nodeValue null或者undefine ...

  10. Linux VNC客户端软件VNC Viewer | RealVNC

    Linux很多时候是作为服务器操作系统,如果是桌面系统通常情况会远程管理linux服务器,很多时候通过VNC进行远程管理,这个时候就要在客户端安装VNC客户端软件,VNC Viewer | RealV ...