js

作者: 趁年轻拼一拼 | 来源:发表于2018-09-02 11:59 被阅读0次

    一、构造函数

    说构造函数的概念之前我们应该先了解类的概念,类与对象的概念息息相关,我们在讲对象的概念的时候说过,一只猫是一个对象,一个人是一个对象,一章桌子也是一个对象,那么我们平时说的猫,人,桌子在没有特定指出是哪一个对象的时候,我们其实说的就是类。我们身边有人类,猫也是 一个类,任何有相同属性和方法的对象我们都可以称他们为一个类。

    在很多面向对象语言中都有类的概念,但是在javascript(es5)中没有类。而我们可以通过构造函数来模拟一个类。

    function Cat(){
        this.name='miaomiao';
        this.age=12;
        this.sayName=function(){
            console.log('我们是猫类');
        }
    }
    var cat=new Cat();
    console.log(cat.name);
    cat.sayName();
    

    构造函数的函数名首字母大写,可以通过在函数中的this为类设置属性和方法,我们在上面的代码中为猫这个类定义了一个name属性,并赋值为"miaomiao",类创建完成后,我们可以通过new关键字创建这个类的实例。例如cat这个变量就是Cat类的一个实例。
    我们可以通过传参的方式,在实例化对象的时候为对象设置属性

    function Cat(name,age){
        this.name=name;
        this.age=age;
        this.sayName=function(){
            console.log('我是'+this.name);
        }
    }
    
    var cat=new Cat('mioamiao',12);
    cat.sayName();
    console.log(cat);
    

    一个构造函数可以生成多个对象的实例

    function Person(name,age){
        this.name=name;
        this.age=age;
        this.say=function(){
            console.log('大家好');
        }
    }
    var lily=Person('lily',12);
    var lucy=Person('lucy',13);
    console.log(lily);
    console.log(lucy);
    console.log(lily.say==lucy.say);
    

    一个构造函数Person生成了两个对象实例lily和lucy,并且有两个属性和一个方法。但是,它们的hobby方法是不一样的。也就是说,每当你使用new来调用构造函数放回一个对象实例的时候,都会创建一个hobby方法。这既没有必要,又浪费资源,hobby方法完全可以被两个对象实例共享。

    构造函数的缺点就是:同一个构造函数的对象实例之间无法共享属性或方法。

    为了解决构造函数的对象实例之间无法共享属性的缺点,js提供了prototype属性。
    //每一个构造函数都有一个prototype属性,这个属性指向一个原型对象,这个原型对象上的所有属性和方法都可以被这个构造函数的实例使用

    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    Person.prototype.hobby=function(){
        return 'movie';
    }
    var girl=new Cat('rose',12);
    var boy=new Cat('jack',18);
    console.log(girl.hobby==boy.hobby);
    

    //如果将hobby方法放在原型对象上,那么两个实例对象都共享着同一个方法。

    二、变量

    我们之前一直使用var定义变量,在ES6版本中,我们可以使用let定义变量,下面我们来说说var与let的区别。
    1)块级作用域

    //S5只有全局作用域和函数作用域,没有块级作用域的概念,这带来了很多不合理的场景。看下面的代码

    for(var i = 0;i<10;i++){
        console.log(i); // 0-9
    }
    console.log(i);     // 10
    

    //因为没有块级作用域,所以我们在for语句的外面仍然能获取i的值,在实际开发中,这是一个不可理喻的场景,我们希望的是这个i只在for语句内有效,所以再ES6中添加了块级作用域的概念,我们可以用let声明变量,问题就解决了

    for(let i = 0;i<10;i++){
        console.log(i); // 0-9
    }
    console.log(i);     // 报错 i is not defined
    

    //因为用let声明变量,变量只在块级作用域下有效,所以再for语句之外输出i会报错。

    相关文章

      网友评论

          本文标题:js

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