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. Lotus Blossom 行动分析

    1 漏洞介绍 1.1 代号 - Lotus Blossom行动 漏洞利用率很高 从2012 -2015或者说最近都还在使用 CVE-2012-0158 Lotus Blossom--莲花: 描述了对东 ...

  2. Vue项目在Docker的自动化部署

    操作系统:CentOS 部署环境:Docker CI/CD工具:Jenkins 1.环境配置 安装Jenkins:Centos安装Jenkins 安装Docker:Centos安装Git.DotNet ...

  3. Educational Codeforces Round 69 D E

    Educational Codeforces Round 69 题解 题目编号 A B C D E F 完成情况 √ √ √ ★ ★ - D. Yet Another Subarray Problem ...

  4. mysql主从复制linux配置（二进制日志文件）

    安装mysql,两台机器一主(192.168.131.153),一从(192.168.131.154) 主机配置 修改主/etc/my.cnf文件 添加 #server_id=153 ###服务器id ...

  5. gulp 前端构建工具使用

    gulp 前端构建工具使用 1.新建一个web  h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_J ...

  6. cycloneii LAB-wide signals

    8 available LAB-width signals - 2 clocks - 2 clock enables - 2 asynchronous clears // - 1 asynchrono ...

  7. 廖雪峰Java13网络编程-3其他-2RMI远程调用

    1.RMI远程调用: Remote Method Invocation 目的:把一个接口方法暴露给远程 示例: 定义一个接口Clock,它有一个方法能够获取当前的时间,并编写一个实现类,来实现这个接口 ...

  8. axis2开发webservice接口入门到精通详解(转)

    最近在开发接口,在网上发现了两篇不错的文章,给大家分享下: 第一篇: 一.Axis2的下载和安装 1.可从http://ws.apache.org/axis2/ 下载Axis2的最新版本:      ...

  9. 04_Hibernate检索方式

    一．Hibernate检索方式概述 OID检索方式:按照对象的OID来检索对象(get/load) HQL检索方式:使用面向对象的HQL查询语言 QBC检索方式:使用QBC(Query By Crit ...

  10. jsp 页面跳转后修改数据，返回时不更新

    项目jsp页面上用隐藏input框接收获取数据,在跳转入另一页面前,js操作修改数据,但返回时发现无效. 需求是点击抽奖后机会减少一次,但是当做跳转操作后返回时,次数有缓存问题 jsp: <in ...