首页 / JAVASCRIPT / JavaScript面向对象编程入门教程_基础知识

JavaScript面向对象编程入门教程_基础知识

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript面向对象编程入门教程_基础知识，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9027字，纯文字阅读大概需要13分钟。

内容图文

尽管面向对象JavaScript与其他语言相比之下存在差异，并由此引发了一些争论，但毋庸置疑，JavaScript具有强大的面向对象编程能力

本文先从介绍面向对象编程开始，然后回顾JavaScript对象模型，最后演示JavaScript中的面向对象编程概念。

JavaScript回顾

如果你对诸如变量（variables）、类型（types）、函数（functions）、以及作用域（scope）等JavaScript概念觉得心里没底，那么你可以阅读重新介绍JavaScript中的这些主题。你还可以查阅JavaScript 1.5核心指南

面向对象编程

面向对象编程是一种编程范式（paradigm），即使用抽象来创建基于真实世界的模型。它使用了几种以前建立的范式技术，包括模块化（modularity）、多态（polymorphism）、和封装（encapsulation）。今天，许多流行的编程语言（比如Java、JavaScript、C#、C++、Python、PHP、Ruby、以及Objective-C）都支持面向对象编程（OOP）。

面向对象编程可视为使用协作对象集合来进行软件设计，这与传统观点相反，传统观点把程序视为函数集合，或者简化为计算机指令列表。在面向对象编程中，每个对象都具有以下能力：接收消息、处理数据、以及给其他对象发送消息。每个对象都可以视为一个独立的具有不同角色或责任的小机器。
面向对象编程旨在为编程提升更大的灵活性和可维护性，并在大规模软件工程中广泛流行。由于其非常重视模块化，因此面向对象代码旨在让开发更简单、稍后理解起来更容易，而且相对于较少采用模块化的编程方法，使得对于复杂情况及步骤的分析、编码和理解更加直接。

专用术语

类（Class）
~ 定义对象的特征（characteristics）。
对象（Object）
~ 类的实例（Instance）。
属性（Property）
~ 某一对象特征（characteristic），例如颜色。
方法（Method）
~ 某种对象能力，例如行走。
构造函数（Constructor）
~ 实例化（instantiation）时所调用的方法。
继承（Inheritance）
~ 一个类可以继承来自另一个类的特征。
封装（Encapsulation）
~ 一个类只定义该对象的特征，一个方法只定义该方法如何执行。
抽象（Abstraction）
~ 将某一对象的复杂继承、方法、属性结合在一起，而且必须能够模拟某一现实模型。
多态（Polymorphism）
~ 不同类可能会定义相同的方法或属性。
对于面向对象编程的进一步描述，参阅维基百科的面向对象编程词条。

基于原型的编程

基于原型的编程（Prototype-based programming）是一种面向对象编程风格，其中类（classes）并不存在，并且行为重用（在基于类的语言中称为继承）是通过粉饰充当原型的现存对象来完成的。这种模式也称为无类的（class-less）、面向原型的（prototype-oriented）、或基于实例（instance-based）的编程。
关于基于原型语言的最初（且非常规范的）示例就是由David Ungar和Randall Smith开发的Self编程语言。然而，这种无类编程风格最近越来越受欢迎，并且已被一些编程语言采用，例如avaScript、Cecil、NewtonScript、Io、MOO、REBOL、Kevo、Squeak（当使用Viewer框架来操纵Morphic组件时）、及其他几种语言。

JavaScript面向对象编程

核心对象（Core Objects）

JavaScript有几个包含在其核心中的对象；例如，Math、Object、Array、以及String等对象。下面的示例演示了如何使用Math对象的random()方法获取随机数。

代码如下:

alert(Math.random());

提示：本例和所有其他示例都假设已在全局范围内定义了函数名alert（正如包含在web浏览器中的alert一样）。alert函数实际上不是JavaScript本身的一部分。

JavaScript核心对象列表，参阅JavaScript 1.5核心参考：全局对象（Global Objects）。

JavaScript中的每个对象都是一个Object对象的实例，并因此继承其所有属性和方法。

自定义对象（Custom Objects）

类（The Class）

JavaScript是基于原型的语言，其中不包含可在如 C++或Java中找到的类声明（class statement）。有时这会让一些习惯于具有类声明语言（languages with a class statement）的程序员感到困惑。不过，JavaScript用函数（functions）作为类。定义一个类简单到就是定义一个函数。在下例中，我们定义了名为Person（人）的新类。

代码如下:

function Person() { }

对象（类实例）（The Object (Class Instance)）

要创建obj对象的一个新实例，我们使用语句new obj，同时将结果（其类型是obj）赋给某个变量（variable），以便稍后访问。
在下例中，我们首先定义名为Person的类，然后创建两个实例（person1和person2）。

代码如下:

function Person() {}
var person1 = new Person();
var person2 = new Person();

还可参阅新的实例化替代方法Object.create。

构造函数（The Constructor）

当实例化时（创建对象实例的瞬间）是会调用构造函数。构造函数是类的一个方法。而在JavaScript中，会函数（function）作为作为该对象的构造函数；因此，也就无需显式定义一个构造函数方法。类中声明的每个行为在实例化时都会执行。

构造函数用于设置对象属性或调用方法为使用该对象做准备。本文稍后会介绍，通过使用一种不同的语法来添加类方法及其定义。

在下例中，当实例化Person时，Person类的构造函数会显示一个警告框。

代码如下:

function Person() {
    alert('Person instantiated');
}
var person1 = new Person();
var person2 = new Person();

属性（对象属性）（The Property (object attribute)）

属性是包含在类中的变量；每个对象实例都有这些属性。属性应设置在类（函数）的原型（prototype）属性中，以便继承正常工作。
在类中操作属性是通过this关键字实现的，this引用当前对象。在类外部访问（读或写）某个属性要通过以下语法：InstanceName.Property；这与C++、Java、以及其他一些语言所用语法相同。（在类内部使用this.Property的语法来获取或设置属性值）。

在下例中，我们为Person类定义gender（性别）属性，然后在初始化时定义该属性。

代码如下:

function Person(gender) {
    this.gender = gender;
    alert('Person instantiated');
}
var person1 = new Person('Male'); // Male: 男
var person2 = new Person('Female'); // Female: 女
//显示person1的性别
alert('person1 is a ' + person1.gender); // person1 is a Male

方法（The methods）

方法遵循与属性相同的逻辑；区别在于它们是函数而且被定义为函数。调用方法与访问属性相似，不过你要在方法名末尾添加()，可能会有参数（arguments）。定义一个方法，就是为该类prototype属性上的某个命名属性指定一个函数；函数被分配到的那个名称就是在对象上调用该方法的名称。
在下例中，我们为Person类定义并使用sayHello()方法。

代码如下:

function Person(gender) {
    this.gender = gender;
    alert('Person instantiated');
}
Person.prototype.sayHello = function() {
    alert('hello');
};
var person1 = new Person('Male');
var person2 = new Person('Female'); // 调用Person的sayHello方法。
person1.sayHello(); // hello

在JavaScript中，方法是作为属性被绑定到某个类/对象的普通函数对象，这意味着，可以“脱离上下文（out of the context）”来调用它们。考虑如下示例代码：

代码如下:

function Person(gender) {
    this.gender = gender;
}
Person.prototype.sayGender = function() {
    alert(this.gender);
};
var person1 = new Person('Male');
var genderTeller = person1.sayGender;
person1.sayGender(); // alerts 'Male'
genderTeller(); // alerts undefined
alert(genderTeller === person1.sayGender); // alerts true
alert(genderTeller === Person.prototype.sayGender); // alerts true

此示例一次演示了多个概念。这表明，在JavaScript中没有“基于对象的方法（per-object methods）”，因为该方法的所有引用都指向完全相同的函数，即我们起初在原型上定义的那个函数。当某个函数被作为方法（或确切地说是属性）调用时，JavaScript会将当前的“对象上下文（object context）”“绑定”到特定的“this”变量。这与调用该函数对象的“call”方法等效，如下所示：

代码如下:

genderTeller.call(person1); //alerts 'Male'e

更多相关信息，请参阅Function.call和Function.apply

继承（Inheritance）

继承是一种方法，用于创建作为一个或多个类专用版本的类。（JavaScript仅支持单类继承）。这个专用类通常被称为子类（child），而其他类通常被称为父类（parent）。在JavaScript中，你要完成继承，需将父类的实例赋给子类，然后将子类特化（specializing）。

提示：由于JavaScript不检测的子类的prototype.constructor（原型的构造函数），参阅Core JavaScript 1.5核心参考：Global Objects:Object:prototype属性，因此我们必须手动指定该值。

在下例中，我们定义Student类作为Person的子类。然后我们重新定义sayHello()方法，并添加sayGoodBye()方法。

代码如下:

// 定义Person类
function Person() {}
Person.prototype.walk = function() {
    alert('I am walking!');
};
Person.prototype.sayHello = function() {
    alert('hello');
};
// 定义Student类
function Student() {
    //调用父类构造函数
    Person.call(this);
}
// 继承Person
Student.prototype = new Person(); // 修正构造函数指针，由于它指向Person
Student.prototype.constructor = Student; // 替换sayHello方法
Student.prototype.sayHello = function() {
    alert('hi, I am a student');
}
// 添加sayGoodBye方法
Student.prototype.sayGoodBye = function() {
    alert('goodBye');
}
var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye(); // 检验继承
alert(student1 instanceof Person); // true
alert(student1 instanceof Student); // true

封装

在上例中，Student无须知晓Person类的walk()方法是如何实现的，但仍可使用该方法；Student类无须显式定义该方法，除非我们想改变它。这称为封装（encapsulation），这样每个类继承其父类的方法，并且只需定义它所希望改变的东西。

抽象

抽象是一种机制（mechanism），允许对处理中的问题的当前部分进行建模。这可以通过继承（特化）或组合（composition）来实现。JavaScript通过继承实现特化（specialization），通过让类实例成为其他对象的属性值实现组合。
JavaScript的Function类继承自Object类（这说明模型的特化），并且Function.prototype属性是Object的实例（这说明了组合）。

代码如下:

var foo = function() {};
alert('foo is a Function: ' + (foo instanceof Function));
alert('foo.prototype is an Object: ' + (foo.prototype instanceof Object));

多态

就像所有的方法和属性被定义在原型属性内部一样，不同的类可以定义具有相同名称的方法；方法的作用域限于定义它们的类之内。这仅当两个类之间没有父子关系（当一个类没有从继承链中的其他类继承时）时才为真。

提示

本文中所提出的面向对象编程实现技术不仅适用于JavaScript，因为就如何进行面向对象编程而言，这是非常灵活的。
同样，这里展示的技术既没有使用任何语言技巧（language hacks），也没有模仿其他语言的对象理论实现。
在JavaScript中，还有其他更高级的面向对象编程的技术，但是那些内容已超出了这篇介绍性文章的范围。

内容总结

以上是互联网集市为您收集整理的JavaScript面向对象编程入门教程_基础知识全部内容，希望文章能够帮你解决JavaScript面向对象编程入门教程_基础知识所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/320531.html

来源：【匿名】

【上一篇】JavaScript两种跨域技术全面介绍_javascript技巧【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript面向对象编程入门教程_基础知识】教程文章相关的互联网学习教程文章

《JavaScript》——面向对象与原型【图】

谈到面向对象，我们之前学过Vb和C#，从抽象到封装再到继承和多态，面向对象的世界真的很好玩，但是JavaScript中的面向对象有些特殊，因为里面没有类，而且对象的创建方式也不同。对象的创建大约有四种方式：使用new关键字创建、使用字面量创建、使用工厂方法创建、使用构造函数创建。 1、使用new关键字var box = new Object(); //创建一个 Object 对象 box.name = 'Lee'; //创建一个 name 属性并赋值 box.age = 100; //...

JavaScript面向对象编程（8）使用中间函数

上一讲我们提出一个很好的思路，将一个类的可复用部分全部定义在prototype中，这样子类继承的时候可以很方便地通过prototype来继承；但是也带来一个问题就是子类在重写prototype中的属性时会改变所有实例的属性，这是因为父类和子类实例都共享同一个prototype；怎么解决呢？思路就是利用一个中间函数，具体请看代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra...

用javascript 面向对象制作坦克大战（二）【代码】【图】

2. 完善地图我们的地图中有空地，墙，钢，草丛，水，总部等障碍物。我们可以把这些全部设计为对象。2.1 创建障碍物对象群对象群保存各种地图上的对象，我们通过对象的属性来判断对象是否可以被穿过或被攻击。 Barrier.js: 1// 障碍物基类对象，继承自TankObject 2 Barrier = function () {3this.DefenVal = 1; // 防御力 4this.CanBeAttacked = true; // 是否可以被攻击 5}6 Barrier.prototype = new TankObject(...

JavaScript 中的面向对象编程【代码】

使用JSON 来定义一个对象: <script type="text/javascript">var xiaoming = { name : ‘xiaoming‘, age : 18, say : function(){ console.log(‘my name is ‘+this.name); }}xiaoming.say();xiaoming.name = ‘li xiao ming‘;xiaoming.say();</script> 原文：http://www.cnblogs.com/likewpp/p/6935684.html

javascript面向对象和原型【代码】

/* //工厂模式 function createObject(name,age){var obj = new Object();//新建一个对象obj.name=name;//新建对象的属性obj.age=age;obj.run=function(){//新建对象的方法return this.name+","+this.age+"...running.";}return obj;//返回新建的对象引用 }var box1 = createObject("Carl",20); var box2 = createObject("Zhang",25); alert(box1.run()); alert(box2.run());//构造函数 function Box(name,age){this.name=name;//新...

JavaScript学习日志（二）：面向对象的程序设计

1，ECMAScript不像其他面向对象的语言那样有类的概念，它的对象与其他不同。2，ECMAScript有两种属性：数据属性和访问器属性。（[[]]这种双中括号表示属性为内部属性，外部不可直接访问） 1.数据属性：[[ Configurable ]]：表示能否通过delete删除属性，能否修改属性的特性，能否将属性修改为访问器属性，默认为true。 [[ Enumerable ]]：表示能否通过for-in循环返回属性，默认为true。 [[ Writable ]]：表示能...

JavaScript【面向对象】-静态方法-私有方法-公有方法-特权方法【图】

JavaScript面向对象是近年来比较火的一个概念了，由于小弟才疏学浅，虽然做过不少的web项目，看了网上很多深奥的资料和教程，还是对他们深奥的理论一知半解，前段时间看了点书，总算有了自己的理解，今天也出来装一回，如果觉得很深奥，请直接鄙视我，如果觉得不对，请直接拍砖。先通俗了解下面一些东西。在JS代码中写入function fn(){}或者var fn=function(){}等等，你都可以将其理解为对象，当然还有数组等等。在理解面向对象...

Javascript基础示例：用JS写简易版贪吃蛇（面向对象）【代码】【图】

废话不多说，代码如下： 1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title>贪吃蛇</title>6 <script>7var map; //地图类对象 8var snake; //蛇类对象 9var food; //食物类对象 10var timer; //定时器对象 11var sum=0; //分数 12 13//地图类 14function Map()15 {16this.width=800; //地图宽度 17this.height=400; //地图高度 18this.position=‘absolute‘; //定位方式 19this.color=‘#cccccc‘; //地图...

JavaScript对象及初识面向对象【图】

JavaScript对象及初识面向对象：原文：http://www.cnblogs.com/s1297-lgy/p/7060692.html

js 面向对象

哈哈，面向对象的创建居然学了这么久，不废话。首先是创建面向的对象的方式。最常用的构造函数和原型模式混合。对于方法使用原型模式，对于属性使用构造函数的方式。。为什么要组合这两种方式呢，是因为通过原型模式创建引用类型的值的时候。创建实例时这个引用类型的值更改，会影响到其他实例。继承，es5使用原型链来继承。继承是通过创建一个对象的实例，并赋给另一个对象的prototype实现的。结果是原来存在于实例中的所有方法和...

js面向对象实现切换面板【代码】

js面向对象的特点：继承(inheritance)：对象方法和属性的继承多态(polymorphism)：组件开发抽象(abstract)：抓住核心问题封装(encapsulation)：把功能写出方法面向过程式切换面板实现：<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>切换面板</title><style>#div1 input {background: white;}#div1 input.active {background: yellow;}#div1 div {width: 200px;height: 200px;background: #CCC;display: none;}</style...

面向对象的JS（一）【代码】

/*JavaScript和其他的语言类似，也是面向对象，自然也就是存在类和对象（对象是类的实例化）*///1、JS对象var empty = {}; //没有任何属性的对象var point = { x: 0, y: 0 }; //两个属性和值var point2 = { x: point.x, y: point.y } //复杂的属性和值var book = {"main title": "javascript", //属性名字中有空格，必须用字符串表示"sub-title": "The Definitive Guide", //属性名字里有连字符，必须用字...

什么是js面向对象？？

简单的来说就是键值对，写一个函数，然后传值进去， function Person(name,age){ this.name = name; this.age = age; } var p1 = new Person(‘Jack‘,20); console.log(p1.__proto__);原文：http://www.cnblogs.com/ZH1132672711/p/4098339.html

深入理解Javascript面向对象编程【代码】【图】

阅读目录一：理解构造函数原型(prototype)机制二：理解原型域链的概念三：理解原型继承机制四：理解使用类继承(继承的更好的方案)五：建议使用封装类实现继承六：理解使用复制继承回到顶部一：理解构造函数原型(prototype)机制 prototype是javascript实现与管理继承的一种机制，也是面向对象的设计思想.构造函数的原型存储着引用对象的一个指针，该指针指向与一个原型对象，对象内部存储着函数的原始属性和方法；我们可以借助pr...

面向对象的JavaScript-006-Function.prototype.bind() 的4种作用【代码】【图】

1. 1// Function.prototype.bind() 的作用 2 3// 1.Creating a bound function 4this.x = 9; 5var module = {6 x: 81,7 getX: function() { returnthis.x; }8 };9 10 console.log(module.getX()); // 81 11 12var retrieveX = module.getX;13 console.log(retrieveX()); 14// 9, because in this case, "this" refers 15// to the global object 16 17// Create a new function with ‘this‘ bound to ...

首页 / JAVASCRIPT / JavaScript面向对象编程入门教程_基础知识

JavaScript面向对象编程入门教程_基础知识

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript面向对象编程入门教程_基础知识】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

面向对象编程 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程