js(面向对象，继承与原型对象)

Posted 2021-12-04 lyx1014

一.定义：

程序用来描述的生活中的具体事务（对象：是封装一个事物属性与功能的程序结构）；主要是用于大程序的维护

二.创建面向对象

1.自定义对象直接量（创建对象）

语法：var obj = {
                    属性名:属性值,
                    ....:....,
                    方法名:function(){..this.属性名..},
                    ...

                }
举例：var lilei={
            sname:"Li Lei",
            sAge:12,
            intr:function (){
                console.log("I‘m "+this.sname+",I‘m "+this.sAge);
            }
        }
        var hmm={
            sname:"Han MeiMei",
            sAge:12,
            intr(){//ES6新写法
                console.log(`I‘m ${this.sname},I‘m ${this.sAge}`)
            }
        }
        console.dir(lilei);
        // 访问属性
        console.log(lilei.sname);//
        console.log(lilei.sAge);//
        console.log(lilei.sgender);//undefind
        console.log(lilei["sname"]);
        // 调用方法
        //lilei.intr();
        //属性赋值
        lilei.sAge++;
        //在给没有创建的属性赋值时，会给对象添加一个属性，然后再赋值
        lilei.sgender = ‘男‘;
        console.log(lilei.sAge);
        lilei.intr();
        var lixilei = lilei;
        lilei=null;
        lixilei.intr();
        hmm.intr()

补充：this关键字：

（1.对象自己的方法，要访问自己的属性，必须用this.属性名

2.引用正在调用函数的对象的关键词，就是前面的对象

3.方法中不加this的变量，默认仅在作用域链中找，不会去对象中查找

如何访问对象的属性方法：

object。属性名  用法与普通的变量完全一样

object 。方法（） 用法与普通的变量完全一样

注意：方法也是属性 ，只不过保存的值是一个函数而已）

 

2.使用new创建对象的两个步骤

 

1.语法 ：创建空对象   
            var obj = new Object();
            2.向空对象中添加属性和方法
            obj.属性名=属性值;
            obj.方法名=function(){..this.属性名..}
            创建对象时，暂时不知道对象的成员

            javascript中对象创建完成，仍可以添加新成员

2.举例说明：     对象本质上来说，就是关联数组     属性名/方法名是key，属性值/函数对象是value
        */
        var emp = new Object();
        emp.ename = ‘马云‘;
        emp.salary = 500;
        emp.work=function(){
            console.log(this.ename+"的工作是清洁，每个月工资"+this.salary);
        }
        console.dir(emp);
        emp.work();
        console.log(emp[‘salary‘])


        // 笔试题:以下创建对象的方式中，那个是对的？   答案：前三种方式都对
        var stu =new Object;
        var str1= Object();
        var stu2= new Object();
        var stu3= Object;
        console.log(stu,str1,stu2,stu3);

        var emp1= new Object();
        emp1.ename=‘王思聪‘;
        emp1.salary=501;
        emp.work=function(){
            console.log(this.ename+"的工作是保安，每个月工资"+this.salary);
        }
        

 

3.创建的第三种方法：构造（Contructor）方法创建对象

1、构造方法是专门描述一类对象统一结构的函数
            2、反复创建多个相同结构的对象时，都要先定义统一的构造函数，再使用构造函数反复创建对象     解决：复用对象的结构代码
        */
        // 1、定义构造函数
        function  Student(sname,sage){   //---装修图纸
            this.sname=sname;
            this.sage=sage;
            this.intr=function(){
                console.log(`I‘m ${this.sname},I‘m ${this.sage}`);
            }
        }
        // 2、使用new调用构造函数，传入具体对象的属性值    

        /*
        new：4件事
            1、创建新的空对象
            2、让新对象继承构造函数的原型对象
                设置新对象的__proto__指向构造函数的prototype
            3、用新对象去调用构造函数
            4、将新对象的地址保存在变量中
        */
        var lilei = new Student("Li Lei",12);
        var hmm = new Student("Han Meimei",12);
        console.dir(lilei);
        lilei.intr();
        console.dir(hmm);
        hmm.intr();
        console.log(lilei == hmm);

三.面向对象的继承

继承：父对象的成员，子对象不用重复创建，也可以直接使用

why：节省内存，又能代码重复

when：只要一类字对象，需要相同的属性或功能的父对象重定义一次即可

how：js中继承都是继承的原型对象

什么叫原型对象？
           专门几种存储一类对象相同属性和功能的父对象
            when：只要一类子对象共有得相同属性值和功能都要定义在原型对象中
            how：原型不需要手动创建，每创建一个构造函数，都会自动生成一个原型对象

 

function Student(sname,sage){
            this.sname=sname;
            this.sage=sage;
        }
        //在原型中添加共有的属性和行为
        Student.prototype.intr=function(){
            console.log(`I‘m ${this.sname},I‘m ${this.sage}`);
        }
        Student.prototype.cName="初二3班";

        var lilei = new Student("Li Lei",12);
        var hmm = new Student("Han Meimei",12);
        lilei.intr();
        hmm.intr();
        lilei.cName="初二2班";//只是改了lilei这个对象中的班级信息
        console.log(lilei.cName);//2班
        console.log(hmm.cName);//3班