[JavaScript知识库] JavaScript面向对象编程

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript面向对象编程 -> 正文阅读

[JavaScript知识库]JavaScript面向对象编程

概述

在前端开发中，JavaScript并没有想象中那么简单，不只是简单的UI输入验证，还有面向对象。对于刚刚JavaScript入门的你来说，可能会稍稍惊讶：哇，虽然前端开发好找对象，妹子多，但是JavaScript真的可以向对象编程么！！！是的，你没有看错，本文将通过一些小例子，逐步讲解JavaScript的面向对象编程。仅供学习分享使用，如有不足之处，还请指正。

ECMA Script有两种开发模式：

函数式（过程化）：小的功能，独立。
面向对象（OOP）：体现了继承，封装，多态的思想，但是ECMA Script没有类的概念。

创建一个对象

创建对象，然后给对象赋值属性和方法。如下所示：

this表示new Object实例化出来的对象，this要放在一个作用域下，比如box.run(){},这个是box作用域下的函数，才可以用this来表示box。
如果在全局作用域下，this，表示window,如：document.write(this);//[object Window]

var box=new Object(); //创建对象
box.name='hex'; //添加属性
box.age=100;
box.run=function(){
    return this.name+this.age+'is running...'; //this表示当前作用域下对象，在此表示box
};

但是以上代码有一个缺点，如果想再实例化一个box2，则需要重复书写代码，如下所示：

var box2=new Object(); //创建对象
box2.name='jack'; //添加属性
box2.age=200;
box2.run=function(){
    return this.name+this.age+'is running...'; //this表示当前作用域下对象，在此表示box
};
document.getElementById("A01").innerText=box.run();
document.getElementById("A02").innerText=box2.run();

通过以上实例，可以看出，box和box2具有很多重复的代码，为了解决以上的问题，可以采用工厂模式，将重复的代码抽象出来，如下所示：

function createObject(name,age){
    var obj=new Object(); //创建对象
    obj.name=name; //添加属性
    obj.age=age;
    obj.run=function(){
        return this.name+this.age+'is running...'; //this表示当前作用域下对象，在此表示box
    };//此处是语句，所以需要加分号
    return obj;
}
var box1=createObject('hexkj',100);
var box2=createObject('jack',200);
document.getElementById("A01").innerText=box1.run();
document.getElementById("A02").innerText=box2.run();

但是以上依然有一个问题：无法区分是哪个对象创建的实例，因为都是Object类型。如下所示：

document.writeln(box1);//输出：[object Object]
document.writeln(typeof box2);//输出：object
document.writeln( box1 instanceof Object);//输出：true

通过构造函数创建对象

ECMA Script可以采用构造函数的方式创建特定的对象。构造函数规范：

构造函数也是函数，但是首字母必须大写(小写也可以，但是不规范)。
必须使用new 运算符来实例化。

构造函数没有Object，但后台会自动创建Object，this就表示Ojbect的实例obj。构造函数不需要返回obj。如下所示：

function Box(name,age){
    this.name=name; //添加属性
    this.age=age;
    this.run=function(){
        return this.name+this.age+'is running...';
    };//此处是语句，所以需要加分号
}
var box1=new Box('hexkj',150);
var box2=new Box('jack',230);
document.getElementById("A01").innerText=box1.run();
document.getElementById("A02").innerText=box2.run();

再新增一个构造函数，如下所示：

function Desk(name){
    this.name=name;
}
var box3=new Desk('Lee');
document.writeln(box3 instanceof Desk );//输出true
document.writeln(box1 instanceof Box );//输出true
document.writeln(box1 instanceof Desk );//输出false

通过以上实例可以看出，使用构造函数，可以解决对象识别的问题。

备注：

变量名name比较特殊，如果有问题，可以使用user代替。
全局作用域中，this表示window。
普通函数，首字母不需要大写。

对象冒充调用

即obj本来是没有run方法的，通过call函数，可以将obj冒充为Box的实例，如下所示：

var obj=new Object();
Box.call(obj,'hex',20);
document.writeln(obj.run());//输出：hex20is running...

对象比较

对于基本类型，比较值是否相等即可。对于引用类型，比较的是引用地址，所有box1和box2是两个不同的类型，因为他们在内存中的地址不同。如下所示：

var box1=new Box('hexkj',150);
var box2=new Box('hexkj',150);
//对于基本类型，比较值是否相等即可
document.writeln(box1.name==box2.name); //输出true
document.writeln(box1.age==box2.age);//输出true
document.writeln(box1.run()==box2.run());//输出true
//对于引用类型，比较的是引用地址，所有box1和box2是两个不同的类型，如下所示：
document.writeln(box1==box2); //输出false
document.writeln(box1.run==box2.run);//输出false

原型对象

我们创建的构造函数，都有一个原型属性（prototype），它也是一个对象。可以共享特定实例的属性和方法。如下所示：

function Box(){} //声明一个构造函数，函数体内什么都没有，如果有，为实例属性，实例方法
Box.prototype.name="hex";//原型属性
Box.prototype.age=18;//原型属性
Box.prototype.run=function(){ //原型方法
    return this.name+this.age+' is running...';
};//此处是语句，所以需要加分号
var box1=new Box();
document.writeln(box1.run());

原型和构造函数的差异：

如果是实例方法，不同的实例化，属性和方法地址是不一样的，是唯一的。
如果是原型方法，属性和方法的地址是共享的，是一样的。

var box2=new Box();
document.writeln(box1==box2); //输出false
document.writeln(box1.run==box2.run);//输出true
document.writeln(box1.prototype); //写法错误，输出undefined 
document.writeln(box1.__proto__); //__proto__是一个指针，指向prototype，输出： [object Object] 
document.writeln(box1.constructor);//得到构造函数本身

判断一个对象实例，是不是原型对象。通过Box.prototype.isPrototypeOf(box1)进行判断，如下所示：

document.writeln(Box.prototype.isPrototypeOf(box1) ); //输出true
function Desk(name){
    this.name=name;
}
var box2=new Desk('Lee');
document.writeln(Desk.prototype.isPrototypeOf(box2) ); //输出true

通过以上实例可以看出：只要声明实例对象，都会默认从原型创建。

删除属性，通过delete进行删除，如下所示：

delete box2.name;//删除实例属性
delete Box.prototype.name; //删除原型属性

判断属性

主要判断属性是实例属性，还是原型属性，或者判断对象是否包含属性，具体如下所示：

document.writeln(box2.hasOwnProperty('name')); //判断实例中是否有对应属性，输出true
document.writeln(box1.hasOwnProperty('name')); //输出false,因为name是在原型中
document.writeln('name' in box1); //输出true ，判断对象是否包含属性
//判断是否只有原型中的属性
function isPrototypeProperty(obj , property){
    //包含属性，但实例中没有，则原型中有
    return property in obj && !obj.hasOwnProperty(property);
}
document.writeln(isPrototypeProperty(box1,'name')); //是否是原型中的属性，输出：true

使用字面量的方式创建对象，这里的{}就是对象，是Object类型的实例。如下所示：

function Box(){}
Box.prototype={
    name:'Lee',
    age:20,
    run:function(){ //原型方法
        return this.name+this.age+' is running...';
    }//此处是语句，所以需要加分号
}
var box1=new Box();
document.writeln(box1.run());
document.writeln(box1.constructor); //输出 function Object() { [native code] }

所以采用字面量的方式创建对象，是Object类型，而不是构造函数创建的。如何要让原型创建的对象指向Box呢？

答：可以通过强制声明constructor属性来指向对应的类型，默认为Object,也可以指向String,Array等。如下所示：

function Box(){}
Box.prototype={
    constructor:Box,
    name:'Lee',
    age:20,
    run:function(){ //原型方法
        return this.name+this.age+' is running...';
    }//此处是语句，所以需要加分号
}
var box1=new Box();
document.writeln(box1.constructor);//输出：function Box(){}

如果重写了prototype，则原有的属性会消失，如下所示：

Box.prototype={
    age:30
}
var box2=new Box();
document.writeln(box2.name);//输出undefined

扩展内置对象

ECMAScript自带的对象，也可以定义prototype。

var box1=[1,3,5,2,7,-2];
document.writeln( box1.sort()); //输出-2,1,2,3,5,7 ，此处采用的是Array自带的sort方法
//查看sort是否是原型对象里面的方法
document.writeln( Array.prototype.sort); //输出：function sort() { [native code] } 
document.writeln( String.prototype.substr); //function substr() { [native code] }

如何扩展内置对象呢？可以在内置对象的prototype中新增方法，如下所示：给String对象扩展了一个addString自定义方法。

String.prototype.addString=function(){
    return this+'[By hex]';
}
var box2='你好啊';
document.writeln(box2.addString());//输出：你好啊[By hex]

一般不建议给内置对象扩展方法，容易导致命名冲突，不利于维护。

原型的缺点

共享属性，无法区分，如下所示：此处box2和box1共享一个family，这并不是我们想要的结果。

Box.prototype={
    name:'Lee',
    age:20,
    family:['苹果','香蕉','桔子'],
    run:function(){ //原型方法
        return this.name+this.age+' is running...';
    }//此处是语句，所以需要加分号
}
var box1=new Box();
box1.family.push('大鸭梨');
document.writeln(box1.family);//输出：苹果,香蕉,桔子,大鸭梨
var box2=new Box();
document.writeln(box2.family);//输出：苹果,香蕉,桔子,大鸭梨

所以共享属性prototype一共有两个问题：

原型如何传参数呢？
两个实例共享同一个属性。原型对象最大的优点是共享，也是最大的缺点

为了解决传参和共享的问题，可以采用构造函数+原型相组合的方式解决：

function Box(name,age){//保持独立的用构造函数
    this.name=name;
    this.age=age;
    this.family=['苹果','香蕉','桔子'];
}
Box.prototype={
    //保持共享的用原型
    constructor:Box,
    run:function(){
        return this.name+this.age+' is running...';
        }
}
var box1=new Box('hexkj',24);
box1.family.push('大鸭梨');
var box2=new Box('Jack',35);
document.writeln(box1.run());//hexkj24 is running...
document.writeln(box1.family);//输出：苹果,香蕉,桔子,大鸭梨
document.writeln(box2.run());//Jack35 is running...
document.writeln(box2.family);//输出：苹果,香蕉,桔子

通过以上混合模式，属性保持了独立，方法保持了共享，比较好的解决了上面的两个问题。但是通过以上方式，Box构造函数和prototype是两部分,没有面向对象的封装效果，看起来比较怪异。可以采用动态原型的方式进行解决，即将原型挪到构造函数内，且判断原型是否包含方法即可。如下所示：

function Box(name,age){//保持独立的用构造函数
    this.name=name;
    this.age=age;
    this.family=['苹果','香蕉','桔子'];
    //原型只有在第一次实例化即可，不需要重复执行
    if(typeof this.run !='function'){
        Box.prototype.run=function(){
            return this.name+this.age+' is running...';
        }
    }
}
var box1=new Box('hexkj',24);
var box2=new Box('Jack',35);
box1.family.push('大鸭梨');
document.writeln(box1.run());//hexkj24 is running...
document.writeln(box1.family);//输出：苹果,香蕉,桔子,大鸭梨
document.writeln(box2.run());//Jack35 is running...
document.writeln(box2.family);//输出：苹果,香蕉,桔子

通过以上方式，实现了封装，且原型对象只执行了一次，执行效果也是一样的。通过动态原型的模式，不可以采用字面量的原型重写，否则都会消失。

继承

原型链继承

javascript采用原型链来实现。被继承的函数叫做超类（父类，基类），继承的函数叫做子类（派生类），如下所示：

function Box(){ //被继承的函数叫做超类（父类，基类）
    this.name='Lee';
}
function Desk(){//继承的函数叫做子类（派生类）
    this.age=18;
}
//通过原型链继承,Desk如何继承Box
Desk.prototype=new Box();
var desk=new Desk();
document.writeln(desk.name+desk.age);//输出Lee18 表示Desk继承了Box的属性

此处name采用就近原则，如果实例属性有，则采用实例属性，否则采用原型属性。

子类从属于自己或父类，如下所示：

document.writeln(desk instanceof Desk);// true 
document.writeln(desk instanceof Box); //true 
document.writeln(desk instanceof Object);//true

对象冒充继承

function Box(name,age){
    this.name=name;
    this.age=age;
    this.run=function(){
        return this.name+this.age+' is running....';
    }
}
Box.prototype.runner='can not running';
function Desk(name,age){
    Box.call(this,name,age);//采用对象冒充调用父类
}
var desk=new Desk('hex',18);
document.writeln(desk.run()); //输出：hex18 is running....
document.writeln(desk.runner);//输出：undefined

通过以上实例可以看出：对象冒充，不可以继承原型中的属性和方法。放在构造函数中，每实例化一次，就分配一个内存地址，放在原型中，又无法继承，该如何解决呢？

答：可以采用组合方法，即原型链继承和对象冒充方式相结合。如下所示：

Desk.prototype=new Box(); //重点
var desk=new Desk('hex',18);
document.writeln(desk.runner);//输出：can not running 表示可以访问原型中的方法和属性

备注

沧海月明珠有泪，蓝田日暖玉生烟。

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-08-27 11:46:11 更:2021-08-27 11:48:19

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/23 13:08:45-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码