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. 关于Button控件的CommandName属性用法的一个实例

    注:本文分享于悠闲的博客,地址:http://www.cnblogs.com/9999/archive/2009/11/24/1609234.html 1.前台的代码 <%@ Page Lang ...

  2. scoreboarding

    Reference docs: https://en.wikipedia.org/wiki/Scoreboarding SSC_course_5_Scoreboard_ex.pdf 1, what i ...

  3. 廖雪峰Java11多线程编程-3高级concurrent包-7Future

    JDK提供了ExecutorService接口表示线程池,可以通过submit提交一个任务. ExecutorService executor = Executors.newFixedThreadPo ...

  4. Python-数据类型内置方法(1)

    目录 数字类型内置方法 整形(int) 浮点型(float) 字符串类型内置方法 优先掌握 需要掌握 了解 列表类型内置方法 优先掌握 需要掌握 数字类型内置方法 整形(int) 作用:年龄 定义:x ...

  5. SPOJ 1043 GSS1 - Can you answer these queries I

    题目描述 给出了序列A[1],A[2],-,A[N]. (a[i]≤15007,1≤N≤50000).查询定义如下: 查询(x,y)=max{a[i]+a[i+1]+-+a[j]:x≤i≤j≤y}. ...

  6. 点击回退时需要点击2次才可返回js

    为a加上window.location.href跳转页面时,再返回到此页面,再点击返回时需点击2次才能返回到前一个页面,原因竟然是href=“#”的原因,在html中#可做为锚点 http://blo ...

  7. 解决git每次输入密码，设置gitlab、github默认push的用户名和密码

    git ssh key配置&解决git每次输入密码   欢迎加入qq群(IT-程序猿-技术交流群):757345416 在使用git时,每次pull/push都需要输入密码,有时大大降低了我们 ...

  8. 34 N皇后问题Ⅱ

    原题网址:https://www.lintcode.com/zh-cn/old/problem/n-queens-ii/ 34. N皇后问题 II   描述 笔记 数据 评测 讨论区 根据n皇后问题, ...

  9. System.Web.Mvc.FilePathResult.cs

    ylbtech-System.Web.Mvc.FilePathResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Pub ...

  10. PHP面向对象魔术方法之__get 和 __set函数

    l 基本的介绍 (1) 当我们去使用不可以访问的属性时,系统就会调用__get方法. (2) 不可以访问的属性指的是(1 . 该属性不存在 2. 直接访问了protected或者private属性) ...