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 的实例:
可以看到是同一个,所以我们可以总结构造函数、实例、和构造函数原型之间的关系如下:
虽然画的是很难看,但是我觉得应该也表达出我要表达的意思了啊,
OOP in Javascript的更多相关文章
- JavaScript的面向对象编程(OOP)(一)——类
在学习JavaScript面向对象的编程之前,需要知道,并了解面向对象的一些基本的常识.初学者中大多数都以为面向对象中,面向对象的编程是很重要和占据很大一部分精力.笔者在之前也是认为OOP是面向对象的 ...
- JavaScript的学习
学习了一段时间了,oop 的JavaScript .但是理解了还不是很深入,所以,决定.通过写博客的方式来,加深JavaScript的程度.2016的目标: 第一阶段:oop的JavaScript 第 ...
- Prototype and Constructor in JavaScript
The concept of prototype in JavaScript is very confusing, especially to those who come with a C++/JA ...
- 用函数式编程对JavaScript进行断舍离
译者按: 当从业20的JavaScript老司机学会函数式编程时,他扔掉了90%的特性,也不用面向对象了,最后发现了真爱啊!!! 原文: How I rediscovered my love for ...
- 深入理解 AngularJS 的 Scope
JavaScript 的原型继承就是奇葩. 之前在 V2EX 上看到讨论说,不会 OOP 的 JavaScript 的程序员就是野生程序员.看来我是属于野生的. 一.遇到的问题 问题发生在使用 A ...
- Frontend Development
原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...
- JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解
JQuery选择器大全 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素 ...
- Create Advanced Web Applications With Object-Oriented Techniques
Create Advanced Web Applications With Object-Oriented Techniques Ray Djajadinata Recently I intervie ...
- 玩转JavaScript OOP[2]——类的实现
概述 当我们在谈论面向对象编程时,我们在谈论什么?我们首先谈论的是一些概念:对象.类.封装.继承.多态.对象和类是面向对象的基础,封装.继承和多态是面向对象编程的三大特性. JavaScript提供了 ...
随机推荐
- PC版模块滚动不显示滚动条效果
以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现. 此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现. HT ...
- 流畅的python学习笔记:第五章
在python中一切都可以视作为对象,包括函数.我们来看个例子: def function_try(): '''it is funciton try doc''' print 'fun ...
- 使用CoApp创建NuGet C++静态库包
NuGet是微软开发平台下的包管理软件,使用它你可以非常方便的将一些第三方的库.框架整合进自己的项目中,省去了不少麻烦的配置过程.但是从官方文档上来看,貌似NuGet对C++的支持不是很好,并且在现阶 ...
- 3.VBScript基础
1.VBS只有一种数据类型 ->Variant类似于泛类型,其中具体类型会在调用的时候具体化 2.声明变量可以用Dim语句,Public语句,Private语句 声明多个变量用逗号分隔 也可以隐 ...
- 【WPF】在新线程上打开窗口
当WPF应用程序运行时,默认会创建一个UI主线程(因为至少需要一个),并在该UI线程上启动消息循环.直到消息循环结束,应用程序就随即退出.那么,问题就来了,能不能创建新线程,然后在新线程上打开一个新窗 ...
- a bad dream
最近在恶补 数据结构,网络,操作系统.有关技术实践(项目)的博客基本会停一停. 4月18号早上,我做了一个梦.6点左右就醒了,醒来后马上趁着记忆"热乎乎"写下来.大概在手机上写了一 ...
- XML 新手入门基础知识(复制,留着自己看)
如果您是 XML 新手,本文将为您介绍 XML 文档的基础结构,以及创建构造良好的 XML 需要遵循的规则,包括命名约定.正确的标记嵌套.属性规则.声明和实体.您还可以从本文了解到 DTD 和 sch ...
- 抽象工厂模式(Java与Kotlin版)
前文推送 设计模式 简单工厂模式(Java与Kotlin版) 工厂方法模式(Java与Kotlin版) Kotlin基础知识 Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操 ...
- [图形学] 结束 [Unity Shader] 开始
历时4个月,终于把<计算机图形学 with OpenGL>啃完了.如果边上班边看,即使一年应该都看不完. 虽然书里用到的GLUT库应该已经废弃,但并不影响用它去理解图形学的内容,我只把它当 ...
- //读取配置文件(属性文件)的工具类-ConfigManager
package com.pb.news.util; import java.io.IOException;import java.io.InputStream;import java.sql.Resu ...