关于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 验证的,这其实算是个不小的问题了, 虽然极简模式跟接近面向对象的思维,但是传统模式却更好理解,实际项目中还是大家各取所需吧,就介绍到这里了。如果有读者觉得本人说的不太对,欢迎指正。
关于js的一些基本知识(类,闭包,变量)的更多相关文章
- js面向对象设计之class类
class 相对 function 是后出来的,既然 class 出来了,显然是为了解决 function 在处理面向对象设计中的缺陷而来.下面通过对比,来看看 class 作为 ES6 中的重大升级 ...
- js面向对象设计之function类
本文仅探讨如何合理的使用 function 在 javascript中实现一个面向对象设计的类.总所周知,javascript 并不能实现一个真正意义上的类,比如 protect 比如 函数重载.下面 ...
- JS详细图解作用域链与闭包
JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...
- js进阶 10-10 可见伪类选择器和内容伪类选择器的作用
js进阶 10-10 可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是 四个 包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...
- 自己整理JS数据的基本知识
自己整理JS数据的基本知识 javascript部分: 1.引入的方式包括外链和内联. 2.JS的数据类型有哪些? 原始类型和引用类型; undefined类型,值为undefined; null类型 ...
- 聊一下JS中的作用域scope和闭包closure
聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...
- 《JS权威指南学习总结--9.3 JS中JAVA式的类继承》
内容要点: 一.JS中的类 1.JAVA或其他类似强类型 面向对象语言的 类成员的模样 实例字段:它们是基于实例的属性或变量,用以保存独立对象的状态. 实例方法: 它们是类的所有实例所共享的方法,由每 ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- 第二十九节:Java基础知识-类,多态,Object,数组和字符串
前言 Java基础知识-类,多态,Object,数组和字符串,回顾,继承,类的多态性,多态,向上转型和向下转型,Object,数组,多维数组,字符串,字符串比较. 回顾 类的定义格式: [类的修饰符] ...
- 对js中局部变量、全局变量和闭包的理解
对js中局部变量.全局变量和闭包的理解 局部变量 对于局部变量,js给出的定义是这样的:在 JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域 ...
随机推荐
- vmware 安装提示the msi failed
原因是卸载不干净,使用批处理bat文件卸载,然后重启即可. VMware workstation 10.0序列号:MA491-6NL5Q-AZAM0-ZH0N2-AAJ5A 百度云文件:http:// ...
- 抓包工具Fidder详解(主要来抓取Android中app的请求)
今天闲着没吊事,来写一篇关于怎么抓取Android中的app数据包?工欲行其事,必先利其器,上网google了一下,发现了一款神器:Fiddler,这个貌似是所有软件开发者必备神器呀!这款工具不仅可以 ...
- java中list集合的内容,如何使用像数据库中group by形式那样排序
java中list集合的内容,如何使用像数据库中group by形式那样排序,比如:有一个 List<JavaBean> 他中包含了一些如下的内容JavaBean:name mone ...
- nodejs package.json详细解读
package.json详细内容 它是这样一个json文件(注意:json文件内是不能写注释的,复制下列内容请删除注释): JavaScript { "name": "t ...
- Slice到C++映射
按:本文是DPWI第6章的笔记. 客户端Slice到C++映射定义的是:怎样把Slice数据类型翻译成C++类型,客户怎样调用操作.传递参数.处理错误.C++映射线程安全,不存在内存管理问题.不建议查 ...
- Mysql 锁机制
innodb引擎提供了针对表级锁和行级锁 这个文章说的是行级锁 Lock有两种类型: 1,s-lock(共享锁),拥有该锁的transaction可以对row进行read操作 2,x-lock(排它锁 ...
- Mysql5.7 安装
1 安装yum源 yum localinstall http://repo.mysql.com//mysql57-community-release-el7-7.noarch.rpm2 参看源 vi ...
- 网站的性能优化与安全(高效C#编码优化)
1. Foreach 比 For 性能高30%2. 避免是使用ArrayList, 因为任何对象到ArrayList都有封装为Object,出来还要拆箱. 用泛型去掉3. HashTalbe取代 ...
- IOS传值之Block传值(二)
@interface QWViewController : UIViewController @property(nonatomic,strong)UILabel *label; @property( ...
- Flex4.6 DataGrid GridItemRenderer宣染器
本文转自:http://blog.sina.com.cn/s/blog_71848dcf01012ctl.html,稍作修改 <?xml version="1.0" enco ...