JavaScript面向对象学习笔记
JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。准确地说,这些属性和方法定义在Object的构造器函数(constructor functions)之上的
prototype属性上,而非对象实例本身。Java通过首先定义“类”,此后创建对象实例时,类中定义的所有属性和方法都被复制到实例中,在 JavaScript 中并不如此复制——而是在对象实例和它的构造器之间建立一个链接(它是__proto__属性,是从构造函数的prototype属性派生的),之后通过上溯原型链,在构造器中找到这些属性和方法,所以JavaScript是基于原型链继承的。- JavaScript面向对象中需要注意以下几点:
(1)JavaScript中除了基本类型外其他都可以看做对象,而每个实例对象都有一个_proto_属性,它指向构造这个实例对象的构造函数的prototype属性。
(2)所有的函数对象都拥有一个特殊的属性prototype属性,该属性指向实例对象的原型对象,经常使用原型对象来实现继承。
(3)prototype是一个原型对象,所以它有一个属性_proto_,这个值指向构造出这个原型对象的构造函数的prototype属性。它还有另外一个属性constructor,它指向指向该原型对象对应的构造函数。
js中的原型继承:首先我们定义了一个构造函数Person,有
first, last, age, gender, interests等属性,所有的方法都定义在构造器的prototype上,如greeting方法。
function Person(first, last, age, gender, interests) {
this.name = {
first,
last
};
this.age = age;
this.gender = gender;
this.interests = interests;
};
Person.prototype.greeting = function() {
alert('Hi! I\'m ' + this.name.first + '.');
};
现在我们想要创建一个Teacher类,这个类会继承Person类,同时包括
- 一个新的属性
subject——这个属性包含了教师教授的学科。 - 一个被更新的
greeting()方法,这个方法打招呼听起来比一般的greeting()方法更正式一点——对于一个教授一些学生的老师来说。
这里我们需要用到call()函数。这个函数允许您调用一个在这个文件里别处定义的函数。第一个参数指明了在您运行这个函数时想对“this”指定的值,也就是说,您可以重新指定您调用的函数里所有“this”指向的对象。其他的变量指明了所有目标函数运行时接受的参数。
Teacher.prototype.greeting = function() {
var prefix;
if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
prefix = 'Mr.';
} else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
prefix = 'Mrs.';
} else {
prefix = 'Mx.';
}
alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
};
之后我们需要让Teacher类继承Person类中的所有方法:
Teacher.prototype = Object.create(Person.prototype);
我们通过Object.create(Person.prototype)实现了Teacher类继承Person类的方法,但是此时Teacher.prototype.constructor指向的是Person方法,这样是有问题的,所以我们还需要:
Teacher.prototype.constructor = Teacher;
这样就将Teacher.prototype.constructor 指向了 Teacher 方法本身。
现在我们还剩最后一项工作,在构造函数Teacher()上定义一个新的函数greeting()。最简单的方法是在Teacher的原型上定义它—把以下代码添加到您代码的底部:
Teacher.prototype.greeting = function() {
var prefix;
if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
prefix = 'Mr.';
} else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
prefix = 'Mrs.';
} else {
prefix = 'Mx.';
}
alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
};
JavaScript面向对象学习笔记的更多相关文章
- javascript面向对象学习笔记——创建对象(转)
工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o ...
- JavaScript正则表达式学习笔记(二) - 打怪升级
本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...
- javascript正则表达式 - 学习笔记
JavaScript 正则表达式 学习笔记 标签(空格分隔): 基础 JavaScript 正则表达式是用于匹配字符串中字符组合的模式.在javascript中,正则表达式也是对象.这些模式被用于Re ...
- JavaScript简易学习笔记
学习地址:http://www.w3school.com.cn/js/index.asp 文字版: https://github.com/songzhenhua/github/blob/master/ ...
- javaScript 对象学习笔记
javaScript 对象学习笔记 关于对象,这对我们软件工程到学生来说是不陌生的. 因为这个内容是在过年学到,事儿多,断断续续,总感觉有一丝不顺畅,但总结还是要写一下的 JavaScript 对象 ...
- 【MarkMark学习笔记学习笔记】javascript/js 学习笔记
1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...
- Javascript MVC 学习笔记(一) 模型和数据
写在前面 近期在看<MVC的Javascript富应用开发>一书.本来是抱着一口气读完的想法去看的.结果才看了一点就傻眼了:太多不懂的地方了. 仅仅好看一点查一点,一点一点往下看吧,进度虽 ...
- Javascript作用域学习笔记(三)
看完<你不知道的javascript>上,对作用域的新的理解(2018-9-25更) 一.学习笔记: 1.javascript中的作用域和作用域链 + 每个函数在被调用时都会创建一个 ...
- PHP:面向对象学习笔记,重点模拟Mixin(掺入)
背景 相对于Python.Node和Ruby来说PHP算是一门容易学习和使用的语言,因为这个特点也使其成为WEB开发领域的佼佼者,本文记录一下我对PHP面向对象部分的学习笔记. 先来一个复杂的例子:M ...
随机推荐
- ThinkPhp关闭Debug后出错解决方案
注:我使用的是ThinkPHP的3.2版本,其他版本类似 从自己入手PHP开发以来,一直使用的是ThinkPHP的框架,前几天偶然间碰到了一个错误,在Debug模式下网站一切正常,而关闭Debug进行 ...
- 了解JDK 6和JDK 7中substring的原理及区别
substring(int beginIndex, int endIndex)方法在jdk 6和jdk 7中的实现是不同的.了解他们的区别可以帮助你更好的使用他.为简单起见,后文中用substring ...
- python_怎么格式化字符串?
案例: 如何对下面字典的key左对齐 {'dhqbl': 30, 'psfgj': 40, 'ontpqsb': 90, 'mrean': 110, 'klespjtr': 60, 'lprnkqhb ...
- 智能机器人chatbot论文集合
机器不学习 jqbxx.com-专注机器学习,深度学习,自然语言处理,大数据,个性化推荐,搜索算法,知识图谱 今年开始接触chatbot,跟着各种专栏学习了一段时间,也读了一些论文,在这里汇总一下.感 ...
- java数组基础
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- 【转】TCHAR
TCHAR 就是当你的字符设置为什么就是什么例如: 当程序编译为 ANSI, TCHAR 相当于 CHAR当程序编译为 UNICODE, TCHAR 相当于WCHAR char ...
- ELK安装
一.概念 1.核心组成 ELK由Elasticsearch.Logstash和Kibana三部分组件组成: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引 ...
- C#使用Redis
一,引入dll 1.ServiceStack.Common.dll 2.ServiceStack.Interfaces.dll 3.ServiceStack.Redis.dll 4.ServiceSt ...
- Spring Boot 使用maven打包成jar
1.application.properties加入如下配置 server.port= 2.修改pom.xml <?xml version="1.0" encoding=&q ...
- Git:warning: LF will be replaced by CRLF
windows中的换行符为 CRLF, 而在linux下的换行符为LF,所以在执行add . 时出现提示,解决办法: $ rm -rf .git // 删除.git $ git config --gl ...