关于js的一些基本知识(类,闭包,变量)
2016-06-02 11:49
567 查看
这里写的都是些杂知识,包括私有,类,闭包这些js不可避免的东西,感觉自己有可能会误人子弟。所以有觉得写错了的读者,希望可以及时评论告诉我。我可以及时更正。多谢大家了
1.关于类的创建
类的创建大致可以分为两类,一个是用方法来定义,另一个是用对象来定义。
下面这个是使用function来定义类
我们看到上面如果使用了var 定义了变量之后 在外部是无法调用的,这是JavaScript语法的规定,“函数内部的变量可以访问函数外部,但是函数外部不可以访问函数内部的变量”,其实就是局部变量的定义,也是使用闭包的原因之一,如何解决这个问题呢?我们就需要使用闭包了,看下面的代码
推荐大家去试试,把代码复制,然后本地执行下,看看输出的this到底分别代表什么,我们上面讲的就是传统的声明类方法,在这里要补充说明几个东西,一般情况下我们在var Cat = function(){}中声明的都是初始化阶段,换句话说,这个方法其实是构造函数,在需要扩展其方法的时候 我们一般使用原型去扩展
就这样子,在这种方式下创建类最需要注意的就是这个this(其实在js你都需要关注this),另外原型可以帮助你实现继承,方便子类方法使用
接下来就是另一种方式了使用对象来定义类,这里面不需要使用到原型。我这里介绍的是极简主义法,还有另一种是需要es5浏览器支持的,Object.creat(),有需要的可以去了解下,下面是极简主义的代码
在这种方式下,如何实现继承呢?很简单,我们定义个Animal看看
在最后面,我们可以看到,这种模式是不可以使用instanceof 验证的,这其实算是个不小的问题了, 虽然极简模式跟接近面向对象的思维,但是传统模式却更好理解,实际项目中还是大家各取所需吧,就介绍到这里了。如果有读者觉得本人说的不太对,欢迎指正。
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 验证的,这其实算是个不小的问题了, 虽然极简模式跟接近面向对象的思维,但是传统模式却更好理解,实际项目中还是大家各取所需吧,就介绍到这里了。如果有读者觉得本人说的不太对,欢迎指正。
相关文章推荐
- Extjs5.1 MVC模式下,数据提交问题:Model.save()
- 客户端javascript笔记
- JsperReport导出PDF报表中文不显示
- JS计时器
- JavaScript模块化实现库教程
- 说说JSON和JSONP,也许你会豁然开朗
- 拖动效果
- JavaScript来实现打开链接页面(转载)
- three.js 相关概念
- javascript==和 ===
- js 数组与对象的区别
- js(replace)的使用(全部替换,变量替换)
- JavaScript判断数字是否为质数的方法汇总
- JS判断浏览器类型及版本
- JS数组去重复
- .Net Json序列化日期/Date(xxxx)/的Js转化&C#转化
- 矩阵乘法快速幂 cojs 1717. 数学序列
- Javascript小技能总结(推荐)
- javascript:算法之数组sort排序
- js 单个图片的延迟加载