关于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)是局部变量,所以只能在函数内部访问它.(该变量的作用域 ...
随机推荐
- ios 给view添加一个渐变的背景色
CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init]; gradientLayer.colors = @[(__bridge ...
- MT5基础知识
获取账户相关信息 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 printf("ACCOUNT_BALANCE ...
- Number-guessing Game
Number-guessing Game Time Limit : 2000/1000ms (Java/Other) Memory Limit : 131072/65536K (Java/Othe ...
- 2.请尝试安装和配置JDK,并给出安装、配置JDK的步骤。
win10/64位 1.解压jdk1.8.0_91_x64.rar 2.同时按住win键和pause键,弹出系统属性窗口,选择高级系统设计选项. 3.然后单击环境变量按钮. 4.弹出环境变量对话框后, ...
- how computer boot up?
The power button activates the power supply in the PC, sending power to the motherboard and other co ...
- webapp前端开发软键盘与position:fixed为我们带来的不便
前提:我们考虑兼容的环境为android和ios两种智能手机 兼容环境测试结果显示android的表现明显好于ios,ios手机在软键盘呼起收起时存在着很严重的兼容性问题 场景展示: 页面正常状态 软 ...
- vs设计界面出现“建控件时出错 响应在此上下文中不可用”
使用VS2010设计Asp.net时出现: 只有在配置文件或 Page 指令中将 enableSessionState 设置为 true 时,才能使用会话状态.还请确保在应用程序配置的 \\ 节中包括 ...
- Linux中切换用户变成-bash4.1-$的解决方法【转】
转自 Linux中切换用户变成-bash4.1-$的解决方法 - xia_xia的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/xia_xia0919/articl ...
- 相对路径json无法获取
在获取json文件内容时,有时会出现相对路径上的json文件无法获取的情况,Chrome上的解决方案如下: 1.右击桌面上的Chrome浏览器图标,点击属性; 2.在目标输入框的内容后头加上--arg ...
- js中对style中的多个属性进行设值
js中对style中的多个属性进行设值: 看一下案例自然就明白: document.getElementById("my_wz1").style.cssText="bac ...