面向对象：
--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. Division Game UVA - 11859 Nim

    Code: #include<cstdio> #include<algorithm> using namespace std; #define maxn 10005 int n ...

  2. CF245H Queries for Number of Palindromes（回文树）

    题意翻译 题目描述 给你一个字符串s由小写字母组成,有q组询问,每组询问给你两个数,l和r,问在字符串区间l到r的字串中,包含多少回文串. 输入格式 第1行,给出s,s的长度小于5000 第2行给出q ...

  3. 题解 P3243 【[HNOI2015]菜肴制作】

    这道题看起来就是个裸的拓扑排序,抄上模板就能AC. 上面这种想法一看就不现实,然鹅我第一次还真就这么写了,然后被随意hack. 我们需要注意一句话: 现在,酒店希望能求出一个最优的菜肴的制作顺序,使得 ...

  4. python main函数

    关于Python的主(main)函数问题 2007-07-23 19:14 初次接触Python的人会很不习惯Python没有main主函数.这里简单的介绍一下,在Python中使用main函数的方法 ...

  5. DICOM：Transfer Syntax传输语义之奇葩GE Private TS

    背景: 专栏之前对Transfer Syntax(暂定中文翻译为传输语义,8月初博客中提到的DICOM3.0标准中文版开源书籍计划顺利启动.兴许会面临诸多专有名词的翻译工作,欢迎广大博友提意见)进行过 ...

  6. POJ 1258 Agri-Net (最小生成树+Prim)

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 39820   Accepted: 16192 Descri ...

  7. IOS-7-纪念一下刚刚接到的第一份offer（下面是面试遇到的问题）

    1.多线程技术 有四种开启线程的方式,基本的为:NSThread.NSOperation.GCD:还有一种已经老掉牙了.基于C语言.就不写了,基本不用. 样例:家在网络图片显示在手机界面上 第一步:代 ...

  8. strchr函数的实现而不是使用

    刚刚在写一个程序的时候突然须要用到定位到一个字符串中第一次出现某个字符的位置,于是就找到了strchr()函数,之前从没实用过的,^_^当然我能够直接调用就可以.可是拥有良好程序素质的洗衣袋决定要想实 ...

  9. JS学习十七天----工厂方法模式

    工厂方法模式 前言 今天自己看了一下自己写的部分博客,发现写的好丑....開始注意自己的排版!!可是偏亮也不是一朝一夕就完毕的,我尽量让它美丽一点.....每天美丽一点点 正文 工厂方法模式是一种实现 ...

  10. android ViewPager实现 跑马灯切换图片+多种切换动画

    近期在弄个项目.要求有跑马灯效果的图片展示. 网上搜了一堆,都没有完美实现的算了还是自己写吧! 实现原理利用 ViewPager 控件,这个控件本身就支持滑动翻页非常好非常强大好多功能都能用上它.利用 ...