JS类的实现:

a.理解类的实现机制

b.使用prototype对象定义类成员

c.一种JS类的设计模式

a.理解类的实现机制

  在JS中可以使用function关键字来定义一个类。

  添加类的成员,在函数内通过this指针引用的变量或者方法都会成为类的成员。

       function class1(){
var s = "abc";
this.p1=s;
this.Method1=function(){
alert("this is a test method");
}
} var obj1=new class1();// //在JS中,function本身的定义就是类的构造函数。
/*
* new 创建对象的过站
* 1)当解释器遇到new操作符时便创建一个空对象;
* 2)开始运行class1这个函数,并将其中的this指针都指向这个新建的对象;
* 3)因为当给对象不存在的属性赋值时,解释器就会为对象创建该属性,例如在class1中,当执行到this.p1=s这条语句时,
* 就会添加一个属性p1,并把变量s的值赋给它,这样函数执行就是初始化这个对象的过程,即实现构造函数的作用。
* 4)当函数执行完后,new操作符就返回初始化后的对象。
*
* 通过这整个过程,JS中就实现了面向对象的基本机制。由此可见,在JS中,function的定义实际上就是实现一个对象的构造器,
* 是通过函数来完成的,这种方式的缺点:
* 1)将所有的初始化语句,成员定义都放到一起,代码逻辑不够清晰,不易实现复杂的功能。
* 2)每创建一个类的实例,都要执行一次构造函数。构造函数中定义的属性和方法总被重复的创建。
* 例如:this.Method1=function(){
alert("this is a test method");
}
这里的Method1每创建一个class1的实例,都会被创建一次,造成了内存的浪费。(prototype对象可以解决相关缺点。)
*/

b.使用prototype对象定义类成员

       function class1(){
this.prop=1;
}; class1.prototype.showProp=function(){//使用函数的prototype属性给类定义新成员
alert(this.prop);
} var obj1=new class1();
obj1.showProp();//调用通过prototype原型对象定义的showProp方法 /*
* prototype是一个js对象,可以为prototype对象添加,修改,删除方法和属性。从而为一个类添加成员定义。
* 了解了函数的prototype对象,在来看new的执行过程:
* 1)创建一个新的对象,并让this指针指向它。
* 2)将函数的prototype对象的所有成员都赋给这个新对象
* 3)执行函数体,对这个对象进行初始化操作
* 4)返回1中创建的对象
*
* 和之前new的执行过程相比,多了用prototype来初始化对象的过程,这也和prototype的字面意思相符,它是所对应类的
* 实例的原型。这个初始化过程发生在函数体(构造器)执行之前,所以可以在函数体内调用prototype中定义的属性和方法!
*
*/ function class2(){
this.prop=1;
this.showProp();
};
class2.prototype.showProp=function(){//使用函数的prototype属性给类定义新成员
alert(this.prop);
}
var obj2=new class2();
//PS:原型对象的定义必须在创建类实例的语句之前,否则它将不会起作用。 //prototype对象运用于设计类的成员,它是和一个类紧密相关的!
//prototype还有一个重要的属性:constructor,表示对该构造函数的引用.
function class3(){
alert(123);
}
class3.prototype.constructor();//调用类的构造函数,等同于: class.prototype.constructor()==class1;

c.一种JS类的设计模式

        /*
* 在JS中,由于对象灵活的性质,在构造函数中也可以为类添加成员,在增加灵活性的同时,也增加了代码的复杂度。
*为例提供代码的可读性和开发效率,可以采用这种定义成员的方式:使用prototype对象来替代,这样function的定义就是类的
* 构造函数,符合传统意义类的实现(类名和构造函数名是相同的)。
*/ //第一种方式
function class1(){
//构造函数
};
class1.prototype.somePropety='sample';
class1.prototype.someMethod=function(){
//
};
//以上这种方式很清晰,但每定义一个属性或方法,都需要使用一次class1.prototype,不仅代码体积变大,而且易读性不够 //第二种方式(推荐)
//进一步改善,可以使用无类型对象的构造方法来指定prototype对象,从而实现类的成员定义
function class2(tt){
//构造函数
this.somePropety=tt;
}
class2.prototype={//通过指定prototype对象来实现类的成员定义
somePropety:'sample',
someMethod:function(){
//...
}
//anything alse
}
/*
* 以上,很清晰的定义了class1,构造函数直接用类名来实现,而成员使用无类型对象来定义,以列表的方式实现了所有属性和
* 方法,并且可以在定义的同时初始化属性的值。这也更像传统意义面向对象语言中类的实现。只是构造函数和类的成员定义被
* 分为两个部分,这可看成JS中定义类的一个固定模式,这样在使用时会更加容易理解。
*
* 注意:在一个类的成员之间互相引用,必须通过this指针类进行,例如在上面例子中的someMethod方法中,如果使用属性
* somePropety,必须通过this.somePropety的形式,因为在JS中每个属性和方法都是独立的,它们通过this指针联系在一个
* 对象上!!!
*/

   

JS OOP -03 JS类的实现的更多相关文章

  1. JS OOP -04 JS中的公有成员,私有成员和静态成员

    JS中的公有成员,私有成员和静态成员 a.实现类的公有成员 b.实现类的私有成员 c.实现类的静态成员 a.实现类的公有成员 之前定义的任何类型成员都属于公有成员的范畴,该类的任何实例都对外公开这些属 ...

  2. 画布跟js.oop

    <Canvas> 是HTML5中新出现的一个元素.就是可以通过  JS绘制图形. 画布(Canvas)是一个没有内容也没有边框的矩形区域.我们可以控制里面的每一个像素. 下面我们首先定义一 ...

  3. JavaScript学习03 JS函数

    JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...

  4. js oop中的三种继承方法

    JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方 ...

  5. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  6. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

  7. OOP in JS Public/Private Variables and Methods

    Summary private variables are declared with the 'var' keyword inside the object, and can only be acc ...

  8. OOP in JS - Inheritance

    Summary You cause a class to inherit using ChildClassName.prototype = new ParentClass();. You need t ...

  9. Node.js系列:Buffer类的使用

    客户端JavaScript中没有对二进制数据提供很好的支持.但是在处理TCP流或文件流时,必须要处理二进制数据.Node.js定义了一个Buffer类,用来创建一个专门存放二进制数据的缓存区. Buf ...

随机推荐

  1. 安装navicat后C盘多了好多链接文件夹

      安装完最新的navicat后C盘多了好多连接文件夹 多了一堆链接的文件夹,里面就是 这些文件,但是吧强迫症怎么能让C盘那么多没有用的文件夹存在呢 最起码是这样的吧: 怎么办呢?找navicat的设 ...

  2. python -- 安装 django

    django-admin startproject 创建的文件名python3/python manage.py startapp 子项目名称python3/python manage.py runs ...

  3. python笔记7 logging模块 hashlib模块 异常处理 datetime模块 shutil模块 xml模块(了解)

    logging模块 日志就是记录一些信息,方便查询或者辅助开发 记录文件,显示屏幕 低配日志, 只能写入文件或者屏幕输出 屏幕输出 import logging logging.debug('调试模式 ...

  4. [webpack]手写一个mvp版本的webpack

    let fs = require('fs'); let path = require('path'); let babylon = require('babylon'); // Babylon 把源码 ...

  5. MySQL数据库之主从复制

    一)MySQL主从复制的原理 MySQL主从复制是一个异步的复制过程,数据从一个MySQL数据库(master)复制到另一个MySQL数据库(slave),master和slave之间实现主从复制,主 ...

  6. 终极解决办法rvct Cannot obtain license for Compiler (feature compiler) with license version >= 3.1

    参考:https://blog.csdn.net/nic_r/article/details/7458038 ARM C/C++ Compiler, RVCT4. [Build ] armcc : e ...

  7. LeetCode_26. Remove Duplicates from Sorted Array

    26. Remove Duplicates from Sorted Array Easy Given a sorted array nums, remove the duplicates in-pla ...

  8. Go 自定义包引入报错

    配置文件 GO111MODULE=on 设置为on时,go命令行会使用modules,而一点也不会去GOPATH目录下查找.但自定义包在 $GOPATH/github.com/winyh/strrev ...

  9. 925. Long Pressed Name

    题目链接:https://leetcode.com/problems/long-pressed-name/description/ Example 1: Input: name = "ale ...

  10. Jenkins增加日志查看内容. 如何查看Jenkins插件的日志?

    进入Jenkins日志项 添加新的日志记录 把插件的GroupID信息填入 对应的源代码 日志生成代码 执行插件,即可查看插件里的日志输出