这里写的都是些杂知识,包括私有,类,闭包这些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的一些基本知识(类,闭包,变量)的更多相关文章

  1. js面向对象设计之class类

    class 相对 function 是后出来的,既然 class 出来了,显然是为了解决 function 在处理面向对象设计中的缺陷而来.下面通过对比,来看看 class 作为 ES6 中的重大升级 ...

  2. js面向对象设计之function类

    本文仅探讨如何合理的使用 function 在 javascript中实现一个面向对象设计的类.总所周知,javascript 并不能实现一个真正意义上的类,比如 protect 比如 函数重载.下面 ...

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

    JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...

  4. js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

    js进阶 10-10  可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是  四个  包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...

  5. 自己整理JS数据的基本知识

    自己整理JS数据的基本知识 javascript部分: 1.引入的方式包括外链和内联. 2.JS的数据类型有哪些? 原始类型和引用类型; undefined类型,值为undefined; null类型 ...

  6. 聊一下JS中的作用域scope和闭包closure

    聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...

  7. 《JS权威指南学习总结--9.3 JS中JAVA式的类继承》

    内容要点: 一.JS中的类 1.JAVA或其他类似强类型 面向对象语言的 类成员的模样 实例字段:它们是基于实例的属性或变量,用以保存独立对象的状态. 实例方法: 它们是类的所有实例所共享的方法,由每 ...

  8. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  9. 第二十九节:Java基础知识-类,多态,Object,数组和字符串

    前言 Java基础知识-类,多态,Object,数组和字符串,回顾,继承,类的多态性,多态,向上转型和向下转型,Object,数组,多维数组,字符串,字符串比较. 回顾 类的定义格式: [类的修饰符] ...

  10. 对js中局部变量、全局变量和闭包的理解

    对js中局部变量.全局变量和闭包的理解 局部变量 对于局部变量,js给出的定义是这样的:在 JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域 ...

随机推荐

  1. TD缺陷通过excel导入QC11.0缺陷库

    在将TD升级到QC之前,参考了各种升级的方式,但是最终发现用excel导入缺陷到QC库是最简单方便的方法,实施步骤如下:1,首先登陆TD,将缺陷的所有信息显示在界面,然后使用缺陷工具将页面所有缺陷保存 ...

  2. 使用CSS灵活的盒子

    CSS3灵活的盒子,或flexbox,是一个布局模式提供页面上的元素的安排这样的元素表现可以预见当页面布局必须适应不同屏幕大小和不同的显示设备.对于许多应用程序,灵活的块盒模型提供了一个改进模型,它不 ...

  3. Chapter 2 Open Book——5

    I was relieved that I had the desk to myself, that Edward was absent. 我能一个人一张桌子很开心,就因为Edward 没来. I t ...

  4. hdu_3966_Aragorn's Story(树链剖分裸题)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3966 题意:给你一棵树,然后给定点之间的路径权值修改,最后单点查询 题解:树链剖分裸题,这里我用树状数 ...

  5. echo json数据给ajax后, 需要加上exit,防止往下执行,带上其他数据,到时ajax失败

    01返回json数据给ajax后需要加上exit.返回json数据前不能有其他输出 function apply(){ if(IS_POST){$info['status'] = 1; echo js ...

  6. string的数值转换

    to_string(val); //数值val的string表示 stoi (s, p, b); stol (s, p, b); stoul (s, p, b); stoll (s, p, b); s ...

  7. ECSTORE1.2系统更改后台密码

    <?php set_time_limit(0); error_reporting(E_ALL^E_NOTICE); ?> <META HTTP-EQUIV="content ...

  8. flash Ane

    1.ANE简介 Adobe AIR Native Extension,Adobe AIR的本地扩展,简称ANE.什么叫本地扩展?因为Adobe AIR是跨平台的一个运行时,可以在Windows,Mac ...

  9. PHP:class static

    简介 static关键词的一种常见用途是,当类的某个变量$var被定义为static时,那么$var就是类的变量. 这意味着:1,该类的任意一个实例对其进行修改,在该类的其它实例中访问到的是修改后的变 ...

  10. postfix防垃圾邮件

    Postfix 2.x 打开/etc/postfix/main.cf文件,在其中增加如下的几行(如果相关的配置存在,就替换之): vi /etc/postfix/main.cf [...] smtpd ...