美文网首页
构造函数 And 类

构造函数 And 类

作者: 胡自鲜 | 来源:发表于2017-12-23 17:15 被阅读0次

    构造函数

    约定俗成:首字母大写;

        function Dog(name,sex){
            this.name = name;
            this.sex = sex;
            this.action = function(){
                console.log("吃、叫、撒欢");
            }
        }
    

    调用构造函数;

    实例化;关键字:new(把抽象类具体化,把类变成对象);
    var xiaohei = new Dog("小黑","female");
    console.log(xiaohei.name);
    xiaohei.action();
    

    new 具体做了什么?三件事

    1 . 创建另一个空的对象

        var obj = {};
    

    2 . 改变this指向:call aplly bind

        Dog.call(obj,"小黑","female");
        console.log(obj);
    

    3 . 赋值原型

          obj.__proto__ = Dog.prototype;
    

    构造函数的原型

    对象是由自身和原型共同构成的;构造函数的原型prototype,属性写在构造函数里,方法写在原型上

     function Person(name,age,height){
           this.name = name;
           this.age = age;
           this.height = height;
      }
    Person.prototype.action = function(){
        //this指实例化的对象 实例化对象共用this
        console.log(this);
        console.log("姓名是:"+this.name);
    }
    Person.prototype.hobby = function(){
        console.log(this);
        console.log("喜欢");
    }
    Person.prototype = function(){
        action:function(){
              console.log("run");
            }
    }
    var newPerson = new Person("张三",19,"178cm");
    

    prototype和proto对比,一个实例化之前,表现形式不同而已

     console.log(Person.prototype === newPerson.__proto__); //true
    

    通过原型找到构造函数 constructor

    function Person(name){
        this.name = name;
    }
    console.log(Person.prototype.constructor);
    
    image.png

    类的特性:封装 ,继承,多态,重载

    function Person(name){
        //私有属性;作用域
        var name = name;
        //共有属性;
        this.height = "183cm";
        //get方法,通过共有方法访问私有属性
        this.get = function(){
            return name;
        }
        //set方法:设置私有属性
        this.set = function(newName){
            name = newName;
            console.log(name);//李四
        }
    }
    var newPerson = new Person("张三");
    console.log(newPerson.get());//张三
    newPerson.set("李四");
    

    继承 call apply bind

      function Dad(height){
        this.name = "张三";
        this.age = 58;
        this.height= height;
        this.money = "$1000000";
        this.hobby = function(){
              console.log("喜欢太极");
        }
    }
    function Son(height){
    //继承的三种方法 call apply bind
        Dad.call(this,height,money);
     // Dad.apply(this,[height,money]);
     // Dad.bind(this)(height,money);
        this.action = function(){
            console.log("wan");
        }
    }
    var newSon = new Son("180cm");
    console.log(newSon.height);
    newSon.hobby();
    newSon.action();
    
    image.png

    继承父类原型,涉及到传址问题,影响父级

    Student.prototype = Person.prototype;
          //重写子级的方法会影响父级
        Student.prototype.hobby = function(){
            console.log("我是重写方法");
    }
    

    解决传值问题

    function Link(){};
    Link.prototype = Person.prototype;
    Student.prototype = new Link();
    

    ES6 类

    class Person{
          //类最开始在加载的时候执行
          constructor(name,age){
                  this.name = name;
                  this.age = age;
            }
            hobby(){
                console.log("喜欢");
            }
            showName(){
            console.log(this.name);
        }
    }
    var zs = new Person("zs",28);
    console.log(zs.age);
    zs.showName();
                
    //类的继承
    class Student extends Person{
        constructor(name,age){
                //super传参,继承属性
                super(name,age);
            }
            action(){
                console.log("我是action函数");
            }
    }
    var newStudent = new Student("李四",222);
    console.log(newStudent.name);
    newStudent.hobby();
    

    相关文章

      网友评论

          本文标题:构造函数 And 类

          本文链接:https://www.haomeiwen.com/subject/fskqgxtx.html