这里写的都是些杂知识,包括私有,类,闭包这些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. ios 给view添加一个渐变的背景色

    CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init]; gradientLayer.colors = @[(__bridge ...

  2. 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 ...

  3. Number-guessing Game

    Number-guessing Game Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Othe ...

  4. 2.请尝试安装和配置JDK,并给出安装、配置JDK的步骤。

    win10/64位 1.解压jdk1.8.0_91_x64.rar 2.同时按住win键和pause键,弹出系统属性窗口,选择高级系统设计选项. 3.然后单击环境变量按钮. 4.弹出环境变量对话框后, ...

  5. how computer boot up?

    The power button activates the power supply in the PC, sending power to the motherboard and other co ...

  6. webapp前端开发软键盘与position:fixed为我们带来的不便

    前提:我们考虑兼容的环境为android和ios两种智能手机 兼容环境测试结果显示android的表现明显好于ios,ios手机在软键盘呼起收起时存在着很严重的兼容性问题 场景展示: 页面正常状态 软 ...

  7. vs设计界面出现“建控件时出错 响应在此上下文中不可用”

    使用VS2010设计Asp.net时出现: 只有在配置文件或 Page 指令中将 enableSessionState 设置为 true 时,才能使用会话状态.还请确保在应用程序配置的 \\ 节中包括 ...

  8. Linux中切换用户变成-bash4.1-$的解决方法【转】

    转自 Linux中切换用户变成-bash4.1-$的解决方法 - xia_xia的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/xia_xia0919/articl ...

  9. 相对路径json无法获取

    在获取json文件内容时,有时会出现相对路径上的json文件无法获取的情况,Chrome上的解决方案如下: 1.右击桌面上的Chrome浏览器图标,点击属性; 2.在目标输入框的内容后头加上--arg ...

  10. js中对style中的多个属性进行设值

    js中对style中的多个属性进行设值: 看一下案例自然就明白: document.getElementById("my_wz1").style.cssText="bac ...