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面向对象详解的更多相关文章

  1. web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）

    函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...

  2. ArcGIS API for javascript开发笔记（六）——REST详解及如何使用REST API调用GP服务

    感谢一路走来默默支持和陪伴的你~~~ -------------------欢迎来访,拒绝转载-------------------- 一.Rest API基础 ArcGIS 平台提供了丰富的REST ...

  3. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  4. 想做web前端project师应该学习些什么？

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  5. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

  6. IP地址和子网划分学习笔记之《IP地址详解》

    2018-05-03 18:47:37   在学习IP地址和子网划分前,必须对进制计数有一定了解,尤其是二进制和十进制之间的相互转换,对于我们掌握IP地址和子网的划分非常有帮助,可参看如下目录详文. ...

  7. Quartz学习——SSMM(Spring+SpringMVC+Mybatis+Mysql)和Quartz集成详解（转）

    通过前面的学习,你可能大致了解了Quartz,本篇博文为你打开学习SSMM+Quartz的旅程!欢迎上车,开始美好的旅程! 本篇是在SSM框架基础上进行的. 参考文章: 1.Quartz学习——Qua ...

  8. Git学习系列之Git基本操作提交项目（图文详解）

    前面博客 Git学习系列之Git基本操作克隆项目(图文详解) 然后可以 cd 切换到 LispGentleIntro 目录, 新增或者修改某些文件.这里只是模拟一下操作, 实际情况可能是 使用 Ecl ...

  9. “全栈2019”Java第一百零四章：匿名内部类与外部成员互访详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  10. Android 高级UI设计笔记07：RecyclerView 的详解

    1. 使用RecyclerView       在 Android 应用程序中列表是一个非常重要的控件,适用场合非常多,如新闻列表.应用列表.消息列表等等,但是从Android 一出生到现在并没有非常 ...

随机推荐

  1. (转)打开Mac OSX原生的NTFS功能

    xingchongsmbp3:~ xingchong$ xingchongsmbp3:~ xingchong$ xingchongsmbp3:~ xingchong$ sudo ln -s /Volu ...

  2. 【核心核心】10.Spring事务管理【TX】XML+注解方式

    转账案例环境搭建 1.引入JAR包 IOC的6个包 AOP的4个包 C3P0的1个包 MySQL的1个驱动包 JDBC的2个目标包 整合JUnit测试1个包 2.引入配置文件 log4j.proper ...

  3. 为WCF增加UDP绑定（储备篇）

    日前我开发的服装DRP需要用到即时通信方面的技术,比如当下级店铺开出零售单时上级机构能实时收到XX店铺XX时XX分卖出XX款衣服X件之类的信息,当然在上级发货时,店铺里也能收到已经发货的提醒.即时通信 ...

  4. nginx 遇见问题与解决问题

    如果你的安装目录为/usr/local/nginx,那么nginx的错误日志目录就是/usr/local/nginx/logs/error.log. 2.如果error.log不存在 就进入 # vi ...

  5. SPSS超详细操作：分层回归(hierarchical multiple regression)

    SPSS超详细操作:分层回归(hierarchical multiple regression) 1.问题与数据 最大携氧能力(maximal aerobic capacity, VO2max)是评价 ...

  6. 模板——tarjan求割点

    在一个无向图中,如果有一个顶点集合,删除这个顶点集合以及这个集合中所有顶点相关联的边以后,图的连通分量增多,就称这个点集为割点集合. 注意求割点中的low定义: 割点中low[u]记录节点u或u的子树 ...

  7. PAT甲级——A1100 Mars Numbers

    People on Mars count their numbers with base 13: Zero on Earth is called "tret" on Mars. T ...

  8. <每日一题>题目28：生成随机的测验试卷(单选题)

    #项目:生成随机的测验试卷文件 import random #资料库 capitals = {'北京市':'京','上海市':'沪','天津市':'津','重庆市':'渝','河北省':'冀','山西 ...

  9. Referenced assembly does not have a strong name

    Step 1 : Run visual studio command prompt and go to directory where your DLL located. For Example my ...

  10. ES6之主要知识点（七）对象

    1.属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. function f(x, y) { return {x, y}; } // 等同于 function ...