关于js的一些基本知识（类,闭包，变量）

Posted 2020-07-19

　　这里写的都是些杂知识，包括私有，类，闭包这些js不可避免的东西，感觉自己有可能会误人子弟。所以有觉得写错了的读者，希望可以及时评论告诉我。我可以及时更正。多谢大家了

　　1.关于类的创建

　　　　类的创建大致可以分为两类，一个是用方法来定义，另一个是用对象来定义。

　　　　下面这个是使用function来定义类　　　　

　　　　var Cat = function(){
           this.name1 = "Cat1";//外部可访问，可以理解为 公共的
           var name2 = "Cat2";//外部不可以访问,可以理解为 私有的
       }
       
       var myCat = new Cat();
       console.log(myCat.name1);//输出为 Cat1
       console.log(myCat.name2);//输出为 undefined　　
　　　　console.log(myCat instanceof Cat);// 输出为true

　　　　我们看到上面如果使用了var 定义了变量之后 在外部是无法调用的，这是javascript语法的规定，“函数内部的变量可以访问函数外部，但是函数外部不可以访问函数内部的变量”，其实就是局部变量的定义，也是使用闭包的原因之一，如何解决这个问题呢？我们就需要使用闭包了，看下面的代码

 

　　　　var name2 = "Cat2-1"
       var Cat = function(){
           this.name1 = "Cat1";//外部可访问，可以理解为 公共的
           var name2 = "Cat2";//外部不可以访问,可以理解为 私有的
           
           //使用闭包去访问name2
           this.getName = function(){
               return name2;
           }
           
           this.test = function(){
            //    console.log(this);//有兴趣可以打印看看
            //    return function(){
            //        console.log(this);//有兴趣可以打印看看
            //        return name2
            //    }
               
            //    return function(){
            //        console.log(this);//有兴趣可以打印看看
            //        return this.name2
            //    }
           }
       }
       
       var myCat = new Cat();
       console.log(myCat.name1);//输出为 Cat1
       console.log(myCat.name2);//输出为 undefined
       console.log(myCat instanceof Cat);// 输出为true
       
       console.log(myCat.getName());// 输出为Cat2
       
       console.log(myCat.test()());//有兴趣可以打印看看

 

　　　　推荐大家去试试，把代码复制，然后本地执行下，看看输出的this到底分别代表什么，我们上面讲的就是传统的声明类方法，在这里要补充说明几个东西，一般情况下我们在var Cat = function(){}中声明的都是初始化阶段，换句话说，这个方法其实是构造函数，在需要扩展其方法的时候 我们一般使用原型去扩展

　　　　var Cat = function(name){
            this.name = name      
           
       }
       
       Cat.prototype.fn1 = function(){
           console.log(this);
           console.log(‘Cat扩展‘);
       }
       
       var myCat = new Cat("Aime");
       
       console.log(myCat.name);  //打印出 Aime    
       
       console.log(myCat.fn1()); //执行了fn1方法

　　　　就这样子，在这种方式下创建类最需要注意的就是这个this(其实在js你都需要关注this),另外原型可以帮助你实现继承，方便子类方法使用

　　　　接下来就是另一种方式了使用对象来定义类，这里面不需要使用到原型。我这里介绍的是极简主义法，还有另一种是需要es5浏览器支持的，Object.creat(),有需要的可以去了解下，下面是极简主义的代码

　　　　 var Cat = {
            createNew: function() {
                var cat = {};　　　　　　
                cat.name = "大毛";　　　　　　
                cat.makeSound = function() {
                    console.log("喵喵喵");
                };　　　　　　
                return cat;
            },
            fn1 : function(){
                console.log(2);
            }
        }
        var cat = new Cat.createNew();
        console.log(Cat.fn1()); //静态方法 打印出 2
        console.log(cat.name); //打印出 大毛
        console.log(cat.makeSound());//打印出 喵喵

　　　　在这种方式下，如何实现继承呢？很简单，我们定义个Animal看看

var Animal = {
            createNew: function() {
                var animal = {};　　　　　　
                animal.name1 = "Animal";　　　　　　
                animal.makeSound1 = function() {
                    console.log("滴滴");
                };　　　　　　
                return animal;
            },
            fn1: function() {
                console.log(1);
            }
        }
        var Cat = {
            createNew: function() {
                var cat = Animal.createNew();　　　　　　
                cat.name = "大毛";　　　　　　
                cat.makeSound = function() {
                    console.log("喵喵喵");
                };　　　　　　
                return cat;
            },
            fn1: function() {
                console.log(2);
            }
        }

        var cat = new Cat.createNew();
        console.log(Cat.fn1()); //静态方法 打印出 2 方法被覆盖
        console.log(cat.name); //打印出 大毛
        console.log(cat.makeSound()); //打印出 喵喵
        console.log(cat.name1);//打印出 Animal
        
        console.log(cat instanceof Cat);//报错 证明无法使用instanceof 判断

　　　　在最后面，我们可以看到，这种模式是不可以使用instanceof 验证的，这其实算是个不小的问题了， 虽然极简模式跟接近面向对象的思维，但是传统模式却更好理解，实际项目中还是大家各取所需吧，就介绍到这里了。如果有读者觉得本人说的不太对，欢迎指正。