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. java 上传MultipartFile和String post请求

    /** * POST Multipart Request * @Description: * @param requestUrl 请求url * @param requestText 请求参数 * @ ...

  2. 《你不知道的JavaScript》上卷——第1章

    知识点总结 1.什么是作用域? 作用域是根据名称查找变量的一套规则. 2.通常将JavaScript归类为“动态”或“解释执行”语言,但事实上它是一门编译语言. 3.编译 在传统编译语言的流程中,程序 ...

  3. 记 openSUSE 42.3 升级到Leap 15.0

    先将系统的软件更新到最新版本 sudo zypper update 删除42.3的软件源,若有其他数据源,如nginx的,也需要一并删除,可使用zypper lr -d 来查询 sudo zypper ...

  4. Zuul上传文件

    对于1M以内的文件上传,无需任何处理,大文件10M以上需要为上传路径添加/zuul前缀,也可使用zuul.servlet-path自定义前缀 如果Zuul使用了Ribbon做负载均衡,那么对于超大的文 ...

  5. 为什么Java中的String是设计成不可变的？（Why String is immutable in java)

    There are many reasons due to the string class has been made immutable in Java. These reasons in vie ...

  6. centos安装gcc4.8.2

    1. 下载源码:镜像地址http://mirror.bjtu.edu.cn/gnu/gcc/gcc-4.8.2/gcc-4.8.2.tar.gz用svn下载可以随时更新到最新的版本svn checko ...

  7. python3-常用模块之re

    正则表达式 定义: 正则表达式是对字符串操作的一种逻辑公式,用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. 是一种独立的规 ...

  8. 【CF285E】Positions in Permutations

    题目 刷水题涨信心 显然这是个广义容斥,我们现在算一下至少有\(i\)个完美数的方案数就好了 这\(1000\)的数据范围显然在暗示\(n^2\)的dp 我们注意到这个条件大概就是\(P_i=i-1\ ...

  9. GitHub的使用问题记录

    1. github如何收藏和关注? github 中的star作用:star 的作用是收藏,目的是方便以后查找. watch 的作用是关注,目的是等作者更新的时候,你可以收到通知.fork 的作用是参 ...

  10. P1249 最大乘积

    打暴力找规律,都是连续自然数去掉一个 n=int(input()) a=[] cnt=0 i=2 tot=0 ans=1 while tot<=n: tot+=i cnt+=1 a.append ...