关于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)是局部变量,所以只能在函数内部访问它.(该变量的作用域 ...
随机推荐
- Linux平台从文件中查找字符赋值于变量
以telnet方式登录Linux主机,在默认目录下用命令创建一个包含DUT wanIP的文本文件.[root] echo wanIP=88.0.100.253 > ./wanIP.txt在默认目 ...
- spring管理事务需要注意的
org.springframework.transaction.NoTransactionException: No transaction aspect-managed TransactionSta ...
- C# 连接SQL Server数据库的几种方式--server+data source等方式
如何使用Connection对象连接数据库? 对于不同的.NET数据提供者,ADO.NET采用不同的Connection对象连接数据库.这些Connection对象为我们屏蔽了具体的实现细节,并提供了 ...
- 第三十九节,python内置全局变量
vars()查看内置全局变量 以字典方式返回内置全局变量 #!/usr/bin/env python # -*- coding:utf8 -*- print(vars()) #输出 # {'__bui ...
- CSS3秘笈:第九章
1.链接状态:大部分浏览器支持4中基本的链接状态:未访问的链接.已访问的链接.访问者的鼠标正悬停在上方的链接.正被单击的链接.这些状态的4个对应伪类选择器分别是:link.:visited.:hove ...
- Codeforces Round #354 (Div. 2)_Vasya and String(尺取法)
题目连接:http://codeforces.com/contest/676/problem/C 题意:一串字符串,最多改变k次,求最大的相同子串 题解:很明显直接尺取法 #include<cs ...
- Linux 解决 bash ./ 没有那个文件或目录 的方法
在Debian 或 ubuntu 64位下运行 ./xxx 会跳出来说没有这个文件或者目录,但是ls看又有这个文件,很是奇怪. 其实原因很简单,是因为他没有32位的运行库 ia32-libs ,直接安 ...
- uCGUI的文字与数值显示方法
uCGUI的数值显示非常的灵活方便,是制作LCD界面非常好的选择. 文字与数值显示的方法: 常用文本显示函数: void GUI_DispStringAt(const char GUI_FAR *s, ...
- Windows平台查看端口占用情况
1.查看所有的端口占用情况 netstat -ano 协议 本地地址 外部地址 状态 PI ...
- 转: Windows如何打开和使用事件查看器管理计算机
方法/步骤 1 右键单击"我的电脑"(win8中名称为"这台电脑.This Computer"),选择"管理",点击. 步骤阅读 2 出 ...