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>
原文地址:https://www.cnblogs.com/foreverlin/p/10095830.html