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 一出生到现在并没有非常 ...
随机推荐
- Luogu P2484 [SDOI2011]打地鼠(模拟+前缀和)
P2484 [SDOI2011]打地鼠 题意 题目描述 打地鼠是这样的一个游戏:地面上有一些地鼠洞,地鼠们会不时从洞里探出头来很短时间后又缩回洞中.玩家的目标是在地鼠伸出头时,用锤子砸其头部,砸到的地 ...
- SpringCloud搭建分布式配置中心(基于git)
1.简介 Spring Cloud Config.它用来为分布式系统中的基础设施和微服务提供集中化的外部配置支持,分为服务端和客户端两个部分. 其中服务端也称为分布式配置中心,他是独立的微服务应用,用 ...
- webpack静态资源拷贝插件
处理不需要使用webpack统一打包处理或webpack不支持的文件 安装 npm install copy-webpack-plugin --save-dev 配置 const copyWebpac ...
- vue基础知识总结
vue不支持安卓6.0以下版本,切记!!! 1.创建vue实例 var vm = new Vue({ el: '#app', //所指向的dom的id data:{ }, //与dom元素绑定的数据 ...
- 项目接入即时聊天客服系统（环信系统）PHP后端操作
环信工作原理: 一.由于环信没有直接的接口来主动调取本项目中的用户数据,所有用户信息必须在环信服务器上注册对应信息成为环信的用户:(这样才能当用户进入聊天时显示其基本信息,如:名称.昵称.电话.邮箱等 ...
- CAAnimation动画
具有动画效果的keyPath //CATransform3D Key Paths : (example)transform.rotation.z //rotation.x //rotation.y / ...
- Bash Specially-crafted Environment Variables Code Injection Vulnerability Analysis
http://www.cnblogs.com/LittleHann/p/3992778.html
- topology进程结束会不会关闭数据库连接
测试环境:redhat,oracle 11.2.0.3.0 测试目标:当java进程关闭之后,进程的数据库连接会不会被释放,何时被释放 实验证明:在运行topology前,执行 select coun ...
- double转String
两种方式: 1.value = new DecimalFormat().format(double); 2.value = String.valueOf(double); 要相保留所有的double位 ...
- vue 引入css及注意事项
组件中: <style scoped> @import '../../static/css/xx.css'; // “ :”必须有 </style> 注:若用以下方法,全部组件 ...