关于js的一些基本知识(类,闭包,变量)

  这里写的都是些杂知识,包括私有,类,闭包这些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 验证的,这其实算是个不小的问题了, 虽然极简模式跟接近面向对象的思维,但是传统模式却更好理解,实际项目中还是大家各取所需吧,就介绍到这里了。如果有读者觉得本人说的不太对,欢迎指正。

时间: 2024-11-09 00:33:40

关于js的一些基本知识(类,闭包,变量)的相关文章

JS基础知识回顾:变量、作用域和内存问题

ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值. 基本类型值指的是简单的数据段,而引用类型值指的是那些可能由多个值构成的对象. 引用类型的值是保存在内存中的对象,与其他语言不同,JavaScript不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间. 在操作对象时,实际上是在操作对象的引用而不是实际的对象. 在很多语言中,字符串以对象的形式来表示,因此被认为是引用类型的,ECMAScript放弃了这一传统. 定义基本类型值和引用类型值的方式是类似的:创建

JS详细图解作用域链与闭包

JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你是初入前端的朋友,我没有办法直观的告诉你闭包在实际开发中的无处不在,但是我可以告诉你,前端面试,必问闭包.面试官们常常用对闭包的了解程度来判定面试者的基础水平,保守估计,10个前端面试者,至少5个都死在闭包上. 可是为什么,闭包如此重要,还是有那么多人没有搞清楚呢?是因为大家不愿意学习吗?还真不是,

理解js中的作用域以及初探闭包

前言 对于js中的闭包,无论是老司机还是小白,我想,见得不能再多了,然而有时三言两语却很难说得明白,反正在我初学时是这样的,脑子里虽有概念,但是却道不出个所以然来,在面试中经常会被用来吊自己的胃口,考察基础,虽然网上自己也看过不少相关闭包的文章,帖子,但貌似这玩意,越看越复杂,满满逼格高,生涉难懂的专业词汇常常把自己带到沟里去了,越看越迷糊,其实终归结底,用杨绛先生的一句话就是:"你的问题在于代码写得太少,书读得不够多",其实在我看来前者是主要的,是后者的检验, 自知目标搬砖20年(还

js settimeout定时 for循环问题 闭包

js settimeout定时 for循环问题 闭包先做个笔记 留待研究 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.7.2.min.js&q

通用js表单验证工具类插件-is.js

is.js是一个强大的通用js表单验证工具类.你可以使用js.js来检测任何东西,例如检测所给的值是否为参数,是否是数组,是否是超链接,甚至可以检测浏览器类型,正则表达式和数学表达式等. is.js根据检测的类型分为:类型检测.正则表达式检测.算数检测.环境检测.时间检测.Presence检测.对象检测.字符串检测数组检测和配置检测. 在线文档:http://www.htmleaf.com/Demo/201502091353.html 下载地址:http://www.htmleaf.com/jQ

Qt一个工程调用另一个工程的类成员变量

一句两句话已经不能表达现在的激动情绪了,唯有感叹知识的博大精深,并把感叹转变为文字. 同一个工程调用其他类成员变量非常简单. 如: 定义 Test1.h中申明成员变量 class A { public: double m_fTest; }; Test1.cpp中改变成员变量的值. m_fTest = 265.78; 然后再类B中调用类A的成员变量m_fTest,并需求类A中改变该值时,类B中也要随之改变: 调用方法:包涵类A的头文件 #include "test1.h" 然后在调用处声

类成员变量初始化的问题

class window{ window(int maker){ System.out.println("window"+maker); } } class House{ window w1 ;//new window(1); window w3 = new window(3); House(){ System.out.print("House"); w3 = new window(33); } window w4 = new window(4); } class

Ubuntu Linux系统包含两类环境变量

Ubuntu Linux系统包含两类环境变量:系统环境变量和用户环境变量.系统环境变量对所有系统用户都有效,用户环境变量仅仅对当前的用户有效. 修改用户环境变量 用户环境变量通常被存储在下面的文件中: ~/.profile ~/.bash_profile 或者 ~./bash_login ~/.bashrc 上述文件在Ubuntu 10.0以前版本不推荐使用. 系统环境变量 系统环境变量一般保存在下面的文件中: /etc/environment /etc/profile /etc/bash.ba

PHP 类成员变量规范得一些理解。

今儿写代码是发现一个问题: PHP 类 成员变量不能接受方法得返回值 做以下测试: bin_2.php <?php /** * Created by PhpStorm. * User: Administrator * Date: 14-12-4 * Time: 下午9:45 */ header("Content-type:text/html;charset=utf-8"); require_once('bin_1.php'); require_once('bin_3.php');

Java学习(八):Java修饰符(类、变量、方法)

java中的修饰符分为类修饰符,变量修饰符,方法修饰符. 类修饰符: 1.public : public 即公共类. 2.package : 默认缺省为包修饰符,本包可见. 3.abstract :凡是用 abstract 修饰符修饰的类,被称为抽象类.含有一个或者多个抽象方法的类必须声明为抽象类,抽象类无法实例化. 4.final :当一个类不可能有子类时可用修饰符 final 把它说明为最终类. 变量修饰符: 1.public :用 public 修饰的变量可以被所有其它类所引用. 2.pr