码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-05-24 19:27:22      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:strong   地址   this   复用   efi   自己   自动   创建对象   int   

一.定义:

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

二.创建面向对象

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(`Im ${this.sname},Im ${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班

 

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

标签:strong   地址   this   复用   efi   自己   自动   创建对象   int   

原文地址:https://www.cnblogs.com/lyx1014/p/10919366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!