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 ...
随机推荐
- MySql 修改外键 支持级联删除
首先必须要有外键,InnoDB甚么的都不说了,直接上修改句子. 要先删除该外键,然后添加. 具体原因貌似是因为不支持alter外键的操作. ALTER TABLE `t_terminal` DROP ...
- Python解析JSON详解
JSON 函数 使用 JSON 函数需要导入 json 库:import json. 函数 描述 json.dumps 将 Python 对象编码成 JSON 字符串 json.loads 将已 ...
- jQuery hover() 方法
$("p").hover(function(){ $("p").css("background-color","yellow&qu ...
- Linux Server release 7.3 更换阿里网络yum源
查看当前系统下的yum源 [root@localhost ~]# rpm -qa |grep yum yum-3.4.3-150.el7.noarch yum-utils-1.1.31-40.el7. ...
- eclipse-java开发实用快捷键
Expand All:ctrl+小键盘* Collapse All:ctrl+shift+小键盘/
- org.apache.catalina.util.DefaultAnnotationProcessor cannot be cast to org.apache.AnnotationProcessor
这几天来公司,公司的SVN坏掉了,然后项目还比较大,是一个分布式的,然后同事就把项目发我了.我在myeclipse里面导入项目了,把相应的jar包也建了个人的library导入了项目,现在项目不报错了 ...
- zabbix_sender用法实例
环境centos6.8 zabbix版本3.2.4 需求: 要远程监控一台服务器A,但只能通过远程服务器连接本地服务器B,但B不能主动连A(因为A没有固定公网ip) 使用了zabbix_agent的a ...
- Activity组件安全(下)
什么是Activity劫持 简单的说就是APP正常的Activity界面被恶意攻击者替换上仿冒的恶意Activity界面进行攻击和非法用途.界面劫持攻击通常难被识别出来,其造成的后果不仅会给用户带来严 ...
- httpd添加新模块
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- Tomcat修改端口号(7.0 version)
目的:有时端口号可能其他服务占用,就需要修改一下Tomcat的端口号,避免冲突. 自我总结,有什么需要改正的地方,请大家补充,感激不尽! 找到Tomcat的的配置文件server.xml 路径:%to ...