javascript里构建类主要有4种方式
1.构造方式定义类
2.原型方式定义类
3.构造和原型结合方式创建类
4.动态的原型方式
各有优缺点,具体如下
1.
构造方式定义类,优点:多个实例对象不共享类的属性值,缺点:每个实例对象都会产生出一个函数say
//构造方式定义类,优点:多个实例对象不共享类的属性值,缺点:每个实例对象都会产生出一个函数say
function User(){
this.username = "zhangsan";//this.不能丢
this.say = function(){//this.不能丢
alert("username:" + this.username );//this.不能丢
}
//下面注释的这种写法不对
// function say(){
// alert("username:" + this.username );
// }
}
var user = new User();
user.username = "lisi";
user.say();//username:lisi
var user1 = new User();
user1.say();//username:zhangsan,不受user对象的影响
//多个实例对象不共享类的属性值:
//多个实例对象不共享类的属性值,如下:
function User(){
this.username = new Array();//this.不能丢
this.say = function(){//this.不能丢
alert("username:" + this.username );//this.不能丢
}
}
var user = new User();
user.username.push("zhangsan");
user.say();//username:zhangsan
var user1 = new User();
user1.say();//user1的username为空,不为zhangsan,因为user1的属性值不受user影响
2.
原型方式定义类,缺点:类的属性值如果是引用类型的(非Number和String类型),则多个实例对象共享
//原型方式定义类,缺点:类的属性值如果是引用类型的(非Number和String类型),则多个实例对象共享
function User(){
}
User.prototype.username = "zhangsan";
User.prototype.say = function(){
alert("username: " + this.username );
}
var user = new User();
user.username = "lisi";
user.say();//username:lisi
var user1 = new User();
user1.say();//username:zhangsan
类的属性值如果是引用类型的(非Number和String类型),则多个实例对象共享:
//类的属性值如果是引用类型的(非Number和String类型),则多个实例对象共享,如下
function User(){
}
User.prototype.username = new Array();
User.prototype.say = function(){
alert("username: " + this.username );
}
var user = new User();
user.username.push("zhangsan") ;
user.say();//username:zhangsan
var user1 = new User();
user1.say();//username:zhangsan,因为user1属性也会受到user的影响,user1和user指向同一引用,即共享同一属性
3.
构造和原型结合方式创建类:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享;缺点:属性和方法分开定义不是太好。
//构造和原型结合方式创建类:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享;缺点:属性和方法分开定义不是太好。
function User(){
this.username = "zhangsan";
}
User.prototype.say = function(){
alert("username: " + this.username );
}
var user = new User();
alert(user.username);
4.
动态的原型方式:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享,同时属性和方法不是分开定义的
////动态的原型方式:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享,同时属性和方法不是分开定义的
function User(){
this.username = "zhangsan";
if(typeof User.flag == "undefined"){
alert("execute...");
User.prototype.say = function(){
alert("username: " + this.username );
}
User.flag = true;
}
}
var user1 = new User();//execute...
var user2 = new User();//不会打印出execute...,则说明方法只创建了一次,即方法只会产生一个
user1.say();//username
总结:
构造方式定义类:缺点:类里的方法,每个实例对象都会产生一个,导致产生大量方法;优点:所有实例对象都单独拥有一份类里的属性,即属性不共享
原型方法定义类:缺点:所有实例对象都共同拥有一份类里的属性,即属性共享。优点:类的方法只会产生一个,不会产生大量方法
构造和原型结合方式创建类:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享;缺点:属性和方法分开定义不是太好。
动态的原型方式:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享,同时属性和方法不是分开定义的
分享到:
相关推荐
深入浅出-React-Native:使用-JavaScript-构建原生应用(上).doc
JavaScript-使用Nuxtjsvuessr构建的V2ex克隆
demo-aspnet-javascript-services-webpack-hmr.zip,带Webpack HMR和SPAFallbackRouteAngular的Angular、ASP.NET核心JavaScript服务、ASP.NET核心JavaScript服务,asp.net是一个开源的web框架,用于使用.net构建现代...
bower-kaazing-client-...该项目包含来自 Kaazing Github 项目 kaazing-client-javascript-demo ( ) 的构建工件。 此项目不打算直接构建或更改。 相反,它会在 kaazing-client-javascript-demo 项目更新和发布时更新。
困惑该项目是在学习前端javascript框架时创建的:香港科技大学的Coursera中的Angular课程。 本课程由Joesh K Muppala 。 该项目是使用版本6.2.1生成的。开发服务器为开发服务器运行ng serve 。 导航到...
Atom-atom-language-javascript-jxa.zip,@atom中的javascript for automation(jxa)语言支持。atom中的javascript for automation(“jxa”)语言支持,atom是一个用web技术构建的开源文本编辑器。
JavaScript编程语言的高性能实现。 Oracle Labs基于GraalVM构建
使用类构建 javascript 应用程序的教程 先决条件 吉特 了解如何设置 git 的好地方是。 Git(下载、文档)。 提交/教程大纲 您可以使用 git checkout step-x 查看本教程的任何一点 要查看任何两节课之间的更改,请...
javascript-978-1-8388-2860-8 JavaScript 实战 - 构建 3 个有用的代码组件 [视频]
Atom-language-javascript-plus.zip,JavaScriptPlus | Syntax Highlighting For Template Strings In Atomjavascript增强版,atom是一个用web技术构建的开源文本编辑器。
(更多详情、使用方法,请下载后细读README.md文件) '与 e'
javascript-978-1-7884-7732-1 构建企业 JavaScript 应用程序
javascript-978-1-8388-2244-6 练习 JavaScript - 从头开始构建 5 个交互式迷你应用程序 [视频]
此插件可让您使用对输入的javascript文件进行。 入门 开始使用您最喜欢的软件包管理器。 用纱安装 纱线添加-D包裹插件模糊处理 使用npm安装 npm install -D parcel-plugin-混淆 在生产模式下运行宗地以混淆代码 ...
这是我从头开始构建的通用JavaScript开发环境。 这与任何特定的JS框架无关。 开始使用 安装。 需要运行多个版本的Node? 使用或 克隆此存储库。 git clone ...
smt-antlr4-javascript-parser 该项目在构建时将生成 ANTLR4 JavaScript 解析类。
class-html-javascript-calc:由uma calculadorabásicacom构建HTML e JavaScript-2020年7月3日-html,css,js
JavaScript-Excel [WIP] 内置的轻量级Excel文件构建API :red_heart: ,由JavaScript驱动 安装 使用 : npm install javascript-excel --save
Syncfusion JavaScript UI控件库 您将需要的唯一JavaScript UI库。 使用Essential JS 2创建的屏幕 目录 框架要点 轻巧且用户友好 整个Essential JS 2框架是从头开始构建的,是轻量级和模块化的。 通过仅包含应用程序...
JavaScript混淆器的Web UI 该项目是项目的Web界面。 您可以看到它在这里运行: 运行它构建React项目: $ yarn # or npm install$ npm run updatesemantic$ npm run webpack:dev 运行快递服务器: $ node server.js ...