OOP in Javascript

写了几篇Vue入门的内容了,今天写点其它的放松一下,简单讲讲javascript中的面相对象。

在面向对象的语言中,都有类的概念,当然es6中开始javascript中也有类的概念了,这里以es5为基础开始讲解,毕竟当前即使写的es6代码,一般还是会通过babel等转码器翻译到es5来执行的;

在js中虽然没有类的概念,但是我们却可以创建对象,一般创建对象有两种方式(这里指自定义对象):

1、使用构造函数

function Person(){

}

var p=new Person();

2、使用字面量

var p={
    //各种属性
}

这里着重介绍一下构造函数方式创建对象;以上面代码为例,function Person(){},这个和普通函数有什么区别么?其实除了命名约定外(建议首字母大写)声明上没有任何区别,主要是调用方式的不同,构造函数调用使用new 操作符,使用new 操作符调用构造函数,主要经过四个步骤:

1)、创建一个新的对象;

2)、把this指向新对象;

3)、给对象添加属性

4)、返回新对象

对我们上面的代码进行一点简单的修改:

function Person(){
   this.name=  "zhangsan";
   this.age=10;
};

var p=new Person();
console.log(p.name,p.age) ;//‘zhangsan 10‘ 

再对比上面使用new操作符调用构造函数的过程,是不是很容易理解输出的结果。

刚才也说了,构造函数和普通函数调用完全相同,那么是不是说可以把构造函数进行普通调用呢?当然可以,对我们的例子再次进行修改:

function Person(){
   this.name=  "zhangsan";
   this.age=10;
};

//var p=Person();
Person();
console.log(window.name,window.age) ;//‘zhangsan 10‘ 

不使用new操作符调用,不会经过上述四个步骤的隐式处理,所以这个时候不会有新对象的创建和this指向的改变,那么此时的this就指向了全局对象,在浏览器中即window对象,所以可以使用window.name来访问,得到正确的输出。

OOP三大特性:封装、继承、多态;这里只讲述在javascript中如何进行继承(限es5)。

继承只是是代码重用的一种手段,那么在js中如何实现继承呢?

基于原型的继承

首先,函数也是对象,因为所有函数都是Function对象的实例,function 函数名,这种方式定义函数只是一种快捷方式,理论上和var 函数名= new Function(p1,body)等价,从这一点上看函数名其实就是指向函数的指针,但是两者不同的是,通过new Function来创建函数,会被js解释器解释两次,一次是声明时,第二次是对body部分的解析。

其次,任何一个函数创建后,都有一个原型对象,如:

声明一个Person函数,那么我们可以使用Person.prototype来打印一下其原型对象,可以看到其原型对象是一个Object类型,里面包括一个属性(不算__proto__,这个术语内部变量,是实例到原型的指针)constructor,指向了函数Person;另外原型对象本身就是另一个对象的实例(这是是Object函数的实例,=new Object()),任何一个对象的实例,都包含一个内部变量__proto__(chrome浏览器)(Object.create(null)创建的对象除外),指向创建这个对象实例的类型的原型,此处__prop__指向的是Object.prototype.而且可以看到Object.prototype上包含的几个方法(toString、valueOf等)。

上面说了任何一个对象的实例,都包含一个指向其构造函数原型的内部变量,那么我们创建一个Person 的实例:

可以看到是同一个,所以我们可以总结构造函数、实例、和构造函数原型之间的关系如下:

虽然画的是很难看,但是我觉得应该也表达出我要表达的意思了啊,??。

综上,构造函数的原型是一个对象,默认情况下,该对象是Object对象的实例;由于访问时,查找规则如下:先查找当前对象的实例属性,如果找到则返回,否则,查找__proto__指向的原型对象上的同名属性,找到则返回,否则继续原型对象的__proto__指向的对象上的同名属性,一直到Object 实例的__proto__,也就是Object.prototype为止,上述由__proto__构建的这个链接就叫做原型链。

请看如下代码:

function Person(){
   this.name="zhangsan";
   this.myFriends=["zhangsan","lisi"]
}

Person.prototype.getName=function(){
   return this.name;
}

function Student(){

}

Student.prototype=new Person();

var s1=new Student();
var s2=new Student();

s1.myFriends.push("wangwu");
console.log(s1.myFriends);??
console.log(s2.myFriends);??

上面的代码我基于原型模式实现了一个简单的继承,那么上面的输出是什么呢?可以进行测试,发现输出全部是["zhangsna","lisi","wangwu"];为什么会出现这样的结果,我们不难分析出,我们为Student构造函数的原型重新指定了新的对象,那么此时这个对象(Person实例)就成了Student构造函数的原型对象,则其实例属性就变成了Student构造函数的原型属性,所以我们在通过Student实例访问其原型中引用类型属性 的时候会产生共享,从而出现上述输出。

这种输出结构和我们预期不符,如何处理这种问题呢,根据我们的查找规则,我们如果在本对象上查找到相对应的属性,不会去查找原型对象,基于这一点,我们只要覆盖原型上的对象即可,而最简单的方式就是借用构造函数,修改我们的代码如下:

function Person(){
   this.name="zhangsan";
   this.myFriends=["zhangsan","lisi"]
}

Person.prototype.getName=function(){
   return this.name;
}

function Student(){
    Person.call(this);//关键调用,注意这里是普通调用,非构造函数调用,本次调用,通过call改变this指向为Student的实例

}

Student.prototype=new Person();

var s1=new Student();
var s2=new Student();

s1.myFriends.push("wangwu");
console.log(s1.myFriends);
console.log(s2.myFriends);

使用一次普通的方法调用,传递this,然后动态的在this上创建name和myFriends属性,这样实例在输出时就不会查找原型上的属性了,解决了输出不符合预期的问题。

但是上面的代码仔细分析还有什么问题呢?

1)、Student.prototype.constructor 指向了Person

2)、调用了两次Person方法,一次是构造函数调用,一次是普通调用

3)、借用构造函数方式,是创建新的实例属性覆盖原型属性,这样会创建额外的属性。

再次修改我们的代码,处理上面的问题:

function inherit(child,parent){
    function F(){}
    F.prototype=parent.prototype;//只要原型上的内容,而不是实例,这样就避免了实例上的属性,只继承原型上的属性(方法)
    F.prototype.constructor=child;//这里是强制修改constructor属性,让它指向子类型
    child.prototype=F.prototype;
}
function Person(){
   this.name="zhangsan";
   this.myFriends=["zhangsan","lisi"]
}

Person.prototype.getName=function(){
   return this.name;
}

function Student(){
    Person.call(this);//关键调用,注意这里是普通调用,非构造函数调用,本次调用,通过call改变this指向为Student的实例

}

//Student.prototype=new Person();
inherit(Student,Person)

var s1=new Student();
var s2=new Student();

s1.myFriends.push("wangwu");
console.log(s1.myFriends);
console.log(s2.myFriends);

当然上述代码还是有些不完美,首先Student.prototype.constructor,应该是不可枚举的,我们这里是却可以。还有很多细节可能考虑不全,细节方面推荐大家啃一下《javascript高级程序设计》这本圣经,本篇就这么多吧。

时间: 2024-08-29 20:15:41

OOP in Javascript的相关文章

JavaScript的面向对象编程(OOP)(一)——类

在学习JavaScript面向对象的编程之前,需要知道,并了解面向对象的一些基本的常识.初学者中大多数都以为面向对象中,面向对象的编程是很重要和占据很大一部分精力.笔者在之前也是认为OOP是面向对象的主要部分,那么和我持有一样想法的,下面先要纠正这一想法,真正了解面向对象. 一.初识面向对象 面向对象分为三部分,包括面向对象分析(OOA).面向对象设计(OOD).面向对象的程序设计(OOP). 1.1 OO编程(Object Oriented Analysis) 典型的OO编程过程,应先整理需求

JavaScript中OOP——>>>面向对象中的继承/闭包

  前  言  OOP  JavaScript中OOP-->>>面向对象中的继承/闭包 1.1面向对象的概念 使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方法.      >>> 继承的两方,发生在两个类之间. 1.2JS模拟实现继承的三种方式:        首先,了解一下call/apply/binb:通过函数名调用方法,强行将函数中的this指向某个对象:            call写法:  func.call(func的this指向的obj,参数

javascript的oop——>>> [__proto__ 与 prototype/原型链/原型属性与原型方法/for-in循环]

  前  言  OOP  javascript的oop中的__proto__  与  prototype/原型链/原型属性与原型方法/for-in循环 1  __proto__  与  prototype/原型链   1.prototype(函数的原型):函数才有prototype.prototype是一个对象,指向了当前构造函数的引用地址呢.                       2.__proto__(对象的原型对象):所有对象都要__proto__属性.当用构造函数实例化(new)一

JavaScript的学习

学习了一段时间了,oop 的JavaScript .但是理解了还不是很深入,所以,决定.通过写博客的方式来,加深JavaScript的程度.2016的目标: 第一阶段:oop的JavaScript 第二阶段:写出jQuery1,26初期的代码 第三阶段:23中设计模式 第四阶段:性能优化的高性能JavaScript与页面优化 第五阶段:frontend-bulid 第六阶段:angularjs  react  的原理和实现 第七阶段:node.js  think.js 第八阶段:mvc mvvc

Javascript讲解系列之一 Prototype原型链

以前没有写博客的习惯,许多的技术积累都是自己稍微总结一下,很少共享,并非自私,而是工作比较忙,前几天接到一个电话面试不理想,才发现公司所用的DOJO并不被外面广泛接受,故而决定把自己所学分享出来,为夯实基础,也为与外界交流思想,形成一种渠道,如需联系,请发送至邮箱:[email protected]. 今天写Javascript系列之第一篇:Prototype原型链.在软件园里随便拉一个码农估计都会写JS,大部分也知道JS是基于原型的语言,但是如果问及JS原生对象(Object,Function

Prototype and Constructor in JavaScript

The concept of prototype in JavaScript is very confusing, especially to those who come with a C++/JAVA/... background. As an OOP langauge, JavaScript is very different from the languages with class. Its classless feature make it somehow difficult to

相关的链接

<!DOCTYPE NETSCAPE-Bookmark-file-1><!-- This is an automatically generated file.It will be read and overwritten.Do Not Edit! --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><TITLE>Bookmarks

深入理解 AngularJS 的 Scope

JavaScript 的原型继承就是奇葩. 之前在 V2EX 上看到讨论说,不会 OOP 的 JavaScript 的程序员就是野生程序员.看来我是属于野生的. 一.遇到的问题 问题发生在使用 AngularJS 嵌套 Controller 的时候.因为每个 Controller 都有它对应的 Scope(相当于作用域.控制范围),所以 Controller 的嵌套,也就意味着 Scope 的嵌套.这个时候如果两个 Scope 内都有同名的 Model 会发生什么呢?从子 Scope 怎样更新父

“拿鐵時光_”博客文章索引

"初探CSS3"系列 初探CSS3 - 选择器 初探CSS3 - 边框 CSS3伸缩布局盒模型 - Flexbox基础知识 CSS3伸缩布局盒模型 - 旧版本Flexbox的使用 CSS3伸缩布局盒模型 - 新版本Flexbox的使用 初探CSS3 - 线性渐变 初探CSS3 - 径向渐变 初探CSS3 - 2D变形 初探CSS3 - 过渡属性transition 初探CSS3 - 动画属性animation "JavaScript学习笔记"系列 数据类型概述 Ja