web前端学习（四）JavaScript学习笔记部分（9）-- JavaScript面向对象详解
1、认识面向对象
1.1、概念
1.一切事物皆是对象
2.对象具有封装和继承特性
3.信息隐藏（类的信息隐藏，包括属性和方法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var person = {
name : "iwen",
age:30,
eat:function(){
alert("能吃");
}
}
alert(person.name);
person.eat();/*执行对象的函数时带上括号就可以执行了*/ function Person(){
/*什么都不写*/
}/*把函数当做对象使用*/
Person.prototype = {
name:"iwen",
age:30,
eat:function(){
alert("吃two");
}
}
var p = new Person();
console.log(p);
alert(p.age + `,`+p.name);
p.eat();
</script>
</body>
</html>
2、面向对象（一）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// alert(`wocao???`);/*测试alert能不能用反引号，结果是可以的*/
(function(){
var n = "testName";/*在进行封装之后只能在封装包内部进行使用，子类无法进行访问n的动作，访问的时候会出错*/
function People(name){
this.name = name;
/*使用this指定的属性是子类在继承父类之后可以进行访问的属性*/
var ParentElement1 = "testParentElement1";
this.ParentElement3 = "testParentElement3"
}
People.prototype.ParentElement2 = "testParentElement2";
People.prototype.say = function(){
alert("people-hello " + this.name);
}
window.People = People;/*将People对象赋值给window，在封装起来之后才可以使用，让子类进行继承*/
}());/*记得这里要加一个分号*/
/*这里不加外面那一层小括号会让你添加函数名,不然就出错,这里是执行这个函数的意思*/ /*alert(People);*//*这里很奇怪，能够直接看到People这个函数对象的内容*/ //alert(People.prototype.ParentElement1);/*undefined*//*不是类的属性名不能够访问,子类也无法访问，详情见下面子类访问ParentElement1*/
alert(People.prototype.ParentElement2);/*这样写才能够访问属性*//*这里是在父类外部添加进去的属性*/
//alert(People.prototype.ParentElement3);/*undefined*//*不是继承过他的子类其他人无法访问这个属性*/
alert(People.prototype.name);/*--------*//*undefined*//*不是继承过他的子类其他人无法访问这个属性*/ function Student(name){
this.name = name;
}
Student.prototype = new People();
var superSay = Student.prototype.say;
var superTestParentElement1 = Student.prototype.ParentElement1;/*/*undefined*//*不是类的属性名不能够访问,子类也无法访问，详情见下面子类访问ParentElement1*/
var superTestParentElement3 = Student.prototype.ParentElement3;
Student.prototype.say = function(){
superSay.call(this);
alert(`student-hello `+this.name+` `+n+` `+superTestParentElement1+ ` `+ superTestParentElement3);
}
var s = new Student("iwen");
s.say(); /*2#
楼主需要看情况实现哈！你在new一个子类对象的时候，需要先调用父类的相关构造器，对父类中的字段进行初始化操作！
如果父类中的字段的权限修饰符声明为private的，那么子类将不能获知父类中该字段的任何信息（就如同不存在一样）。
别的权限声明情境下，如果子类定义了一个和父类同名的字段，那么子类实例每次获取的都将是子类中声明的同名字段，
如果想要调用父类中的同名字段，需要使用super关键字进行调用。当然如果子类和父类中同名字段存储的值不一样，
那么取得的值自然也是不同的（具备不同的内存区间）。这个时候能够达到楼主想要的需求！！如果子类中没有与父类同名的字段，
那么子类将通过继承获得父类的该字段，对子类的该字段的操作当然也会被保存起来的！！*/ /*4#
你可以用2个子类一起继承一个父类，然后用子类1调用父类的属性，改变值，再用子类2调用看值改变了没有，
明显答案是没有。。不可能彻底改变父类的值，如果能改变那程序都乱跑了。。。子类不能彻底改变父类的值，
只能调用父类的属性重新赋值罢了。。*/ </script>
</body>
</html>
3、面向对象（二）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
(function(){
var n = "ime";
function Person(name){
var _this = {};
_this._name = name;
_this.sayHello = function(){
alert("PersonHello" + _this._name + n);
}
return _this;/*返回这个函数对象，这一句实现了这整个类的定义工作*/
}
window.Person = Person;
}()); function Teacher(name) {
var _this = Person(name);
var superSay = _this.sayHello;
_this.sayHello = function(){
superSay.call(this);/*调用自己的时候这样写是不能够在superSay后面加括号的*/
alert("TeacherHello"+_this._name);
}
return _this;
}
var t = Teacher("zhangjie");
t.sayHello(); t.testProperty = "原来如此";/*这种临时加的对象属性也是可以的，后面可以打印出来*/
alert(t.testProperty);
</script>
</body>
</html>
web前端学习（四）JavaScript学习笔记部分（9）-- JavaScript面向对象详解的更多相关文章
- web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）
函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...
- ArcGIS API for javascript开发笔记（六）——REST详解及如何使用REST API调用GP服务
感谢一路走来默默支持和陪伴的你~~~ -------------------欢迎来访,拒绝转载-------------------- 一.Rest API基础 ArcGIS 平台提供了丰富的REST ...
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- IP地址和子网划分学习笔记之《IP地址详解》
2018-05-03 18:47:37 在学习IP地址和子网划分前,必须对进制计数有一定了解,尤其是二进制和十进制之间的相互转换,对于我们掌握IP地址和子网的划分非常有帮助,可参看如下目录详文. ...
- Quartz学习——SSMM(Spring+SpringMVC+Mybatis+Mysql)和Quartz集成详解（转）
通过前面的学习,你可能大致了解了Quartz,本篇博文为你打开学习SSMM+Quartz的旅程!欢迎上车,开始美好的旅程! 本篇是在SSM框架基础上进行的. 参考文章: 1.Quartz学习——Qua ...
- Git学习系列之Git基本操作提交项目（图文详解）
前面博客 Git学习系列之Git基本操作克隆项目(图文详解) 然后可以 cd 切换到 LispGentleIntro 目录, 新增或者修改某些文件.这里只是模拟一下操作, 实际情况可能是 使用 Ecl ...
- “全栈2019”Java第一百零四章：匿名内部类与外部成员互访详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- Android 高级UI设计笔记07：RecyclerView 的详解
1. 使用RecyclerView 在 Android 应用程序中列表是一个非常重要的控件,适用场合非常多,如新闻列表.应用列表.消息列表等等,但是从Android 一出生到现在并没有非常 ...
随机推荐
- Powerdesigner 生成数据字典
https://www.jianshu.com/p/f491d0d3c503http://blog.csdn.net/adparking/article/details/50402980http:// ...
- Redis相关语法
设置用户密码 config set requirepass yourPassword
- HTML+css 小组件
1.三角 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- php数据结构课程---6、常见排序有哪些
php数据结构课程---6.常见排序有哪些 一.总结 一句话总结: 冒泡排序(Bubble sort):依次交换 选择排序 ( Selection Sort ):在未排序序列中找到最小(大)元素,依次 ...
- Excel常用函数总结
Excel常用函数总结 2016-10-28 Kevin 叼着奶瓶撩妹 1. VLOOKUP函数 常见形式 问题描述:将下图中G列的数据根据学生的姓名填充到D列. 公式解析: =VLOOKUP(A2, ...
- Java-slf4j：sfl4j
ylbtech-Java-slf4j:sfl4j 1.返回顶部 1. SLF4J,即简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种 ...
- C++ #define，typedef，using用法区别
一.#define #define 是宏定义命令,宏定义就是将一个标识符定义为一个字符串,源程序中的该标识符均以指定的字符串来代替,是预编译命令,因此会在预编译阶段被执行 1.无参宏定义 无参宏的宏名 ...
- day 41 前端之前端初识
前端之前端初识 前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...
- 08-background详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Grep- Linux必学的60个命令
1.作用 grep命令可以指定文件中搜索特定的内容,并将含有这些内容的行标准输出.grep全称是Global Regular Expression Print,表示全局正则表达式版本,它的使用权限是所 ...