JavaScript - 基于原型的面向对象

时间:2022-09-14 20:16:49

### JavaScript - 基于原型的面向对象

1. 引言

JavaScript 是一种基于原型的面向对象语言,而不是基于类的!!!

  • 基于类的面向对象语言,比如 Java,是构建在两个不同实体的概念之上的:即类和对象。

  • 基于原型的语言(如 JavaScript)并不存在这种区别:它只有对象。基于原型的语言具有所谓原型对象(prototypical object)的概念。原型对象可以作为一个模板,新对象可以从中获得原始的属性。任何对象都可以指定其自身的属性,既可以是创建时也可以在运行时创建。而且,任何对象都可以作为另一个对象的原型(prototype),从而允许后者共享前者的属性。

对象的产生

  • 基于类的面向对象语言: 依靠类产生
  • 基于原型的面向对象语言: 依靠 构造器利用原型构造出来的。

例如工厂造一辆车,一方面,工人必须参照一张工程图纸,设计规定这辆车应该如何制造。这里的工程图纸就好比是语言中的 类 (class),而车就是按照这个 类(class)制造出来的;另一方面,工人和机器 ( 相当于 constructor) 利用各种零部件如发动机,轮胎,方向盘 ( 相当于 prototype 的各个属性 ) 将汽车构造出来。

2.构造对象

  • 字面式对象声明

例如:

var test = {
name : 'Test',
email : '123@qq.com'
website : 'http://www.test.com'
}

然后可以访问

//以成员的方式
test.name;
test.email;
//以hash_map的方式
test["name"];
test["website"];
  • 使用函数构造器构造对象

每个构造器实际上是一个 函数(function) 对象, 该函数对象含有一个“prototype”属性用于实现 基于原型的继承(prototype-based inheritance)和 共享属性(shared properties)。

对象可以由“new 关键字 + 构造器调用”的方式来创建

// 构造器 Person 本身是一个函数对象
function Person() { // 此处可做一些初始化工作 }
// 它有一个名叫 prototype 的属性
Person.prototype = {
name: "张三",
age: 26,
gender: "男",
eat: function(stuff){
alert("我在吃" + stuff);
}
} // 使用 new 关键字构造对象 var p = new Person();

JavaScript - 基于原型的面向对象

3.理解原型链

每个由构造器创建的对象拥有一个指向构造器 prototype 属性值的 隐式引用(implicit reference),这个引用称之为 原型(prototype)。进一步,每个原型可以拥有指向自己原型的 隐式引用(即该原型的原型),如此下去,这就是所谓的 原型链(prototype chain) 。

在具体的语言实现中,每个对象都有一个 proto 属性来实现对原型的 隐式引用。

function Person(name){
this.name = name;
}
var p = new Person();
console.log(p.__proto__ === Person.prototype ); // 对象的隐式引用指向了构造器的 prototype 属性,所以此处打印 true
console.log(Person.prototype.__proto__ === Object.prototype ); //原型本身是一个 Object 对象,所以他的隐式引用指向了Object 构造器的 prototype 属性 , 故而打印 true
console.log(Person.__proto__ === Function.prototype );// 构造器 Person 本身是一个函数对象,所以此处打印 true

有了 原型链,便可以定义一种所谓的 属性隐藏机制,并通过这种机制实现继承。当要给某个对象的属性赋值时,解释器会查找该对象原型链中第一个含有该属性的对象(注:原型本身就是一个对象,那么原型链即为一组对象的链。对象的原型链中的第一个对象是该对象本身)进行赋值。反之,如果要获取某个对象属性的值,解释器自然是返回该对象原型链中首先具有该属性的对象属性值。下图说名了这中隐藏机制:

JavaScript - 基于原型的面向对象

object1->prototype1->prototype2 构成了 对象 object1 的原型链,根据上述属性隐藏机制,可以清楚地看到 prototype1 对象中的 property4 属性和 prototype2 对象中的 property3 属性皆被隐藏。(因为解释器会查找该对象原型链中第一个含有该属性的对象

4.继承

  • 利用原型链 Horse->Mammal->Animal 实现继承

      // 声明 Animal 对象构造器
    function Animal(){} // 将Animal 的 prototype 属性指向一个对象,亦可直接理解为指定 Animal 对象的原型
    Animal.prototype = {
    name: "animal",
    weight: 0,
    eat: function(){
    alert( "Animal is eating!" );
    }
    } // 声明 Mammal 对象构造器 function
    Mammal() { this.name = "mammal"; } // 指定 Mammal 对象的原型为一个 Animal 对象。
    Mammal.prototype = new Animal(); // 实际上此处便是在创建 Mammal 对象和 Animal 对象之间的原型链 // 声明 Horse 对象构造器
    function Horse(height,weight){
    this.name = "horse";
    this.height = height;
    this.weight = weight;
    }
    // 将 Horse对象的原型指定为一个 Mamal 对象,继续构建 Horse 与 Mammal 之间的原型链
    Horse.prototype = new Mammal(); // 重新指定 eat方法 , 此方法将覆盖从 Animal 原型继承过来的 eat 方法
    Horse.prototype.eat = function() {
    alert( "Horse is eating grass!");
    } // 验证并理解原型链
    var horse = new Horse( 100, 300 );
    console.log(horse.__proto__ === Horse.prototype );
    console.log( Horse.prototype.__proto__ === Mammal.prototype );
    console.log( Mammal.prototype.__proto__ === Animal.prototype );
  • 类式继承

基于原型的继承方式,虽然实现了代码复用,但其行文松散且不够流畅,可阅读性差,不利于实现扩展和对源代码进行有效地组织管理。

所以,类式继承方式在语言实现上更具健壮性,且在构建可复用代码和组织架构程序方面具有明显的优势。这使得程序员们希望寻找到一种能够在 JavaScript 中以类式继承风格进行编码的方法途径。

jQuery 之父 John Resig 在搏众家之长之后,用不到 30 行代码便实现了自己的 Simple Inheritance。使用其提供的 extend 方法声明类非常简单。

4.JavaScript 私有成员实现

JavaScript 的信息隐藏就是靠闭包实现的。

// 声明 User 构造器
function User( pwd ) {
var password = pwd; // 定义私有属性
// 定义私有方法
function getPassword() { // 返回了闭包中的 password
return password;
} // 特权函数声明,用于该对象其他公有方法能通过该特权方法访问到私有成员
this.passwordService = function() {
return getPassword();
}
}
// 公有成员声明
User.prototype.checkPassword = function( pwd ) {
return this.passwordService() === pwd;
};
// 验证隐藏性
var u = new User( "123456" );
console.log( u.checkPassword("123456" )); // 打印 true
console.log( u.password ); // 打印 undefined
console.log( typeof u.getPassword === "undefined" );// 打印 true

JavaScript的prototype 具体含义,或者继承机制的设计思想,良心推荐,讲的非常清楚。

http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

JavaScript - 基于原型的面向对象的更多相关文章

  1. javascript: 基于原型的面向对象编程

    Douglas Crockford指出javascript是世界上最被误解的编程语言.由于javascript缺少常见的面向对象概念,许多程序猿认为javascript不是一个合适的语言.我在做第一个 ...

  2. javascript基于原型实现面向对象

    传统的OO语言有类的概念,但js(ES5)却是基于原型实现的面向对象. 原型是?我们创建的每一个函数都会有一个原型(prototype)属性,这个属性是一个指针,指向函数的原型(prototype)对 ...

  3. javascript基于原型的语言的特点

    一.基于原型的语言的特点 1 只有对象,没有类;对象继承对象,而不是类继承类. 2  “原型对象”是基于原型语言的核心概念.原型对象是新对象的模板,它将自身的属性共享给新对象.一个对象不但可以享有自己 ...

  4. JavaScript基于原型的继承

    在一个纯粹的原型模式中,我们会摒弃类,转而专注于对象,基于原型的继承相比基于类的继承的概念上更为简单 if( typeof Object.beget !== 'function') { Object. ...

  5. 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

    面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...

  6. JavaScript初探系列之面向对象

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...

  7. Atitit.prototype-base class-based  基于“类” vs 基于“原型”

    Atitit.prototype-base class-based  基于“类” vs 基于“原型” 1. 基于“类” vs 基于“原型”1 2.  对象的产生有两种基本方式.一种是以原型(proto ...

  8. javascript面向对象 用new创建一个基于原型的javascript对象

    //创建一个类 其实就是个对象 var Student={ name:"robot", height:1.6, run:function(){ console.log(this.n ...

  9. 通过JavaScript原型链理解基于原型的编程

    零.此文动机 用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Pr ...

随机推荐

  1. [转]Android Binder设计与实现 - 设计篇

    摘要 Binder是Android系统进程间通信(IPC)方式之一.Linux已经拥有管道,system V IPC,socket等IPC手段,却还要倚赖Binder来实现进程间通信,说明Binder ...

  2. sqlserver2012更改文件组

    1.查看文件组 sql语句 SELECT Data_located_on_filegroup = fg.groupname, Table_name = obj.name FROM sysfilegro ...

  3. Python网络编程(2)——socket模块(2)

    目录: 1. 异常 2. 地址族 3. 套接字类型 4. 模块方法 5. Socket对象与实例方法 socket模块提供了Python中的低层网络连接接口,用于操作套接字操作. 异常 socket模 ...

  4. (转)如何学好C语言,一个成功人士的心得!

    zidier111发表于 2013-1-26 08:59:05   今 天,我能够自称是一个混IT的人,并能以此谋生,将来大家能一次谋生,都要感谢两个人:克劳德.香农和约翰.冯.诺依曼,是他们发现了所 ...

  5. [CF580B]Kefa and Company(滑动窗口)

    题目链接:http://codeforces.com/problemset/problem/580/B 某人有n个朋友,这n个朋友有钱数m和关系s两个属性.问如何选择朋友,使得这些朋友之间s最大差距小 ...

  6. Coded UI Test对Webpage进行自动化测试

    如何使用Coded UI Test对Webpage进行自动化测试   在Visual Studio中,Coded UI Test已经不是什么新特性了,较早版本的Visual Studio中就已经有这个 ...

  7. SpringBoot中@ManyToMany的坑

    我在User表中添加了manytomany的外键映射 @ManyToMany(fetch=FetchType.EAGER) @JoinTable(name="user_role", ...

  8. tensorflow-RNN和LSTM

    本章主要介绍循环神经网络(recurrent neuralnetwork,RNN)和长短时记忆网络(long short-term memory,LSTM) 一. RNN简介 1.背景 循环神经网络挖 ...

  9. android:ems="10"是什么意思

    android:ems = " 设置TextView或者Edittext的宽度为10个字符的宽度.当设置该属性后,控件显示的长度就为10个字符的长度,超出的部分将不显示. xml中 andr ...

  10. html内容溢出部分...

    首先标签必须满足不是行内标签 方法一:(单行)此方法没有任何问题 width: 38px;(需要给定宽度) overflow: hidden; white-space: nowrap; text-ov ...