了解JavaScript 面向对象基础 & 原型与对象
面向对象语言中的对象
老是能听到什么基于对象, 面向对象. 什么是对象, 如果有面向对象基础的人可以无视了, 下面举个简单的例子给大家讲讲面向对象中, 对象的定义, 这个是比较通用的, 不过对于JS来说不太一样, 但是理解总是好的.
首先, 先有类型(Class), 这个类是指具有本质相同的一类事物, 比如大自然中的, 动物类, 植物类, 岩石类, 他们在根本上面具有本质相同的特性, 类下面也区分小的类, 比如同是动物类, 动物类里面也可以有猫类, 狗类, 当然啦, 人类也是一种类, 而在编程中, 类就是这一类东西用代码体现的一种抽象.
然后, 就有了对象(Object), 对象就是类中的一个个体, 比如人类中的一个人, 这就是对象, 再举些例子, 比如猫类中一只猫, 狗类里面具体到个体的一只狗, 都可以理解为对象, 在编程中, 对象就是类抽象出来的一个个体的实例.
可能上面说的有点晦涩, 但是久了就好理解了, 现在举点更具体的例子, 老师这一个职业, 算是一类人, 也就是类, 而你最喜欢的那个老师就是这个类的对象, 说白了就是类有种包含关系, 人类里面可以有男人类, 女人类, 也可以有教师类, 消防员类, 在日后的学习中, 大家也会知道, 这些小的类都可以称之为人类的子类, 也可以说这些类继承了人类, 而对象却不具备这种特性, 它只是某个类抽象到个体之后的单个实例(也就是实际的例子), 比如一位老师, 一个消防员, 这都是对象.
JS中的对象
JS中对对象的描述也差不太多, 只是JS是一种基于对象的语言, 并不是完全意义上的面向对象, 想要实现JS的类, 应该是一种使用函数模拟的方式, 所以可以这么说, JS中有模拟的类, 不存在真实意义上的类. 不过我们这里不纠结类, 着重讲对象.
上面说的让大家对对象也有一定理解了, 那么下面给大家再加一个新的概念, 那就是属性, 属性是一个对象的一些特点, 比如拿人作为一个对象, 那么人就有名字, 年龄, 身高, 体重这些特点, 这些特点也就是这个人作为一个对象的属性. 所以现在我们知道了, 一个对象它是具有很多属性的.
那么概念性的东西差不多了, 现在我们开始着重用代码讲对象.
首先我们先创建出一个对象.
var person = {
name : "Jianwei",
age : 23,
gender : "male"
};
var peron大家都知道, 变量的声明, 指向了一个对象, 对象的类型如上所示, {}中间用" : "分隔的属性和属性值, 通常我个人习惯称之为键值对(key-value), 这里面创建了一个对象, 这个对象共有三个属性, name, age, gender, 属性名, 也就是key, 这个key的类型没有特殊的限制(可以是值, 可以是字符串, 甚至于可以是另一个对象), 但是会通过toString()方法自动转化为字符串, 所以可以理解为key最后都会是一个字符串, 而value的类型没有特殊的限定(可以是值, 可以是字符串, 对象等等). 要注意的是, 属性是无序的, 所以声明的时候不需要注意顺序之类的.
对象创建方法
第一种, 使用{}包含键值对的方式创建对象(对象直接量).
var person = {
name : "Jianwei",
age : 23,
gender : "male"
profession : {
compang : "Oricle",
job : "iOS"
}
};
第二种, 使用new构造器关键字.
var person = new Object();
第三种, 使用Object.create()方法创建对象.
var person = Object.create({
name : "Jianwei",
age : 23,
gender : "male"
});
前两个方式比较好理解, 最后的这种方式, 简单介绍下, Object.create这个方法需要一个对象类型的参数, 创造出的对象的原型指向的就是这个参数, 这个参数是字面量对象, 原型指向的自然是Object.prototype了, 具体使用哪个, 要因地制宜.
对象属性的访问
对象的属性一般通过两种方式访问, 最常见的是通过点方法来进行访问, 也可以通过key索引的方式, 如上的代码案例.
var person = {
name : "Jianwei",
age : 23,
gender : "male"
};
如果我想要为oerson的name属性重新赋值, 那么使用如下语句的实现效果是相同的.
person.name = "Jianwei Wang";
person["name"] = "Jianwei Wang";
对象的原型(prototype)
这里我还是用不严谨的个人理解来给大家讲, 这样有助于大家理解, 当大家能够理解我的看法, 再去查看严谨的理论, 我相信这样的学习是更好令人消化的.
之前我们有讲父类和子类, 就比如人类, 和教师类, 人类是教师类的父类(super class), 教师类是人类的子类, 所以人类具有的所有属性, 教师类都继承了下来, 比如姓名, 年纪, 教师类也可以有自己新的, 父类所没有的属性, 比如教过了多少学生, 带过多少班级. 所以现在大家先给自己一个这样的思想, 就是父类的不作特殊修饰的属性, 子类都可以继承.
现在我们再来看JS中的对象, 首先, 有两种创建对象的方式, 上面说过了, 继承也简单的解释了, 那么很恶心的知识下面是, 建议大家用一天的时间来理解.
每个JS对象(null除外, 其实它本来自己有一个类型的, 但是官方那边修改之后发现, 大量的浏览器都出错了, 所以当使用typeof的时候, null显示的类型还是Object类型), 都和另一个对象相关联, "另一个"对象就是原型.
通过直接量创建的对象都继承自Object.prototype(这句代码其实是对原型对象的引用).
var person = {
name : "Jianwei",
age : 23,
gender : "male"
};
那么这个person对象继承的就是Object.prototype, 如果这时候为其添加了一个属性, 语句如下:
Object.prototype.hobby = "eat";
那么这个时候, 也能够从person上面访问到hobby这个属性, 也可以对hobby进行修改(能否修改会取决于一些条件, 我这段代码是允许, 后面会讲具体的设置方法).
通过关键字new和构造函数调用创建的对象的原型就是构造函数的prototype属性的值.
function person(){
name : "Jianwei",
age : 23,
gender : "male"
};
var jianweiWang = new person();
那么这个jianweiWang对象继承的就是person.prototype, 如果这时候为其添加了一个属性, 语句如下:
person.prototype.hobby = "eat";
那么这个时候, 也能够从jianweiWang上面访问到hobby这个属性, 也可以对hobby进行修改(能否修改会取决于一些条件, 我这段代码是允许, 后面会讲具体的设置方法).
这个继承关系也可以称之为原型链, jianweiWang继承的是person.prototype, 再往上继承的是Object.prototype, 所以如果Object.prototype上的属性, 几乎所有的对象都会有.
所以假如为一个对象的一个属性赋值, 首先会顺着原型链向上找, 如果整个原型链都没有, 才会为这个对象添加一个属性.
所有的继承来的属性并不是实际拥有了, 只是通过原型链获取到了, 复制给了自己一份, 所以假如上面的例子.
jianweiWang.hobby = "run";
但是这个时候打印person.prototype.hobby, 结果还是"eat", 因为只是副本变了, 本身并不会变.
了解JavaScript 面向对象基础 & 原型与对象的更多相关文章
- 第一百零九节,JavaScript面向对象与原型
JavaScript面向对象与原型 学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标 ...
- 03.JavaScript 面向对象精要--理解对象
JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...
- JavaScript 面向对象之原型对象
原型的概述 我们创建的每个函数都有一个 prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法. 逻辑上可以这么理解:prototype 通过调用构 ...
- JavaScript面向对象基础与this指向问题
前 言 我们的程序语言经历了从"面向机器".到"面向过程".再到"面向对象"的一个过程.而JavaScript是一 ...
- JavaScript中的原型和对象机制
1.对象相关的一些语言特性 JavaScript里所有的东西都是对象, 对象是属性的集合.要知道,函数也是对象, 能够作为变量的值. 返回值. 参数或者属性的值. 函数对象特殊的地方是能通过" ...
- JavaScript 面向对象与原型
ECMAScript有两种开发模式:1.函数式(过程化);2.面向对象(OOP); 一 创建对象1.普通的创建对象 ? 1 2 3 4 5 6 7 8 9 // 创建一个对象,然后给这个对象新的属性和 ...
- 对JavaScript 引擎基础:原型优化的研究 -----------------------引用
一.优化层级与执行效率的取舍 介绍了现代 JavaScript 引擎通用的工作流程: 我们也指出,尽管从高级抽象层面来看,引擎之间的处理流程都很相似,但他们在优化流程上通常都存在差异.为什么呢?为什么 ...
- javascript面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现. 工厂 ...
- JavaScript面向对象和原型函数
对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔!). 常用的几种对象创建模 ...
随机推荐
- 基于 SailingEase WinForm Framework 开发优秀的客户端应用程序(1:概述)
本系统文章将详细阐述客户端应用程序的设计理念,实现方法. 本系列文章以 SailingEase WinForm Framework 为基础进行设计并实现,但其中的设计理念及方法,亦适用于任何类型的客 ...
- 使用Metrics监控应用程序的性能
在编写应用程序的时候,通常会记录日志以便事后分析,在很多情况下是产生了问题之后,再去查看日志,是一种事后的静态分析.在很多时候,我们可能需要了解整个系统在当前,或者某一时刻运行的情况,比如当前系统中对 ...
- nginx常用代理配置
因为业务系统需求,需要对web服务作nginx代理,在不断的尝试过程中,简单总结了一下常见的nginx代理配置. 1. 最简反向代理配置 在http节点下,使用upstream配置服务地址,使用ser ...
- docker创建私有仓库
由于网速和大中华局域网效果,使得我们在DockerHub下载镜像的速度很慢,甚至一些国内的镜像仓库,也感觉速度不是很好.所以,很有必要在本地或者一个我们访问很快速的地方(自己的云服务器)搭建一套镜像仓 ...
- CSharpGL(19)用glReadPixels把渲染的内容保存为PNG图片(C#)
CSharpGL(19)用glReadPixels把渲染的内容保存为PNG图片(C#) 效果图 本文解决了将OpenGL渲染出来的内容保存到PNG图片的方法. 下载 CSharpGL已在GitHub开 ...
- 不要听吹牛逼什么前端MVVM框架就是好,其实都是一帮没学好分层设计的搞出来的,让你彻底看清前端MVVM的本质
最近前端圈子里面,发现大家都在热炒概念,什么knockout,angularJs,都被捧成神了,鄙人不才,最近心情也不好,特地写这篇文章来找骂 写代码的码农都知道,Java社区虽然不是一个提出分层思想 ...
- JS创建对象篇
JS创建对象篇 Object构造函数创建 var person = new Object(); person.name = "Tom"; person.age = 10; pers ...
- Linux命令:ps,netstat,top
ps ps用于查看当前运行的进程.如果想查看动态的进程信息,可以使用top命令.查看详细命令帮助使用man ps. ps最常用的选项组合就是ps aux: # ps aux USER PID %CPU ...
- iOS 多个播放器同时播放,双击全屏,单击退出全屏
前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlaye ...
- Android自定义控件之基本原理
前言: 在日常的Android开发中会经常和控件打交道,有时Android提供的控件未必能满足业务的需求,这个时候就需要我们实现自定义一些控件,今天先大致了解一下自定义控件的要求和实现的基本原理. 自 ...