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>

巴特西

web前端学习（四）JavaScript学习笔记部分（9）-- JavaScript面向对象详解

1、认识面向对象

2、面向对象（一）

3、面向对象（二）

最新文章

热门文章