您的位置:时时app平台注册网站 > web前端 > JavaScript 创建对象和构造类实现代码【彩世界网址

JavaScript 创建对象和构造类实现代码【彩世界网址

2019-11-02 01:15

2.1.6 面向对象的好处

无论选择哪种方法,将代码面向对象化都有很多好处。一个重要的好处就是,每一个对象本质上就是一个命名空间。可以用此来模拟Java和C#的 包。

另一个好处就是可以使用对象来隐藏数据。例如:

function newClass(){
    this.firstName = "frank";
    lastName = "tom";
}

var nc = new newClass();
alert(nc.firstName);
alert(nc.lastName);

执行上面的代码会有两个警告信息:第一个输出“frank”,第二个输出“undefined”。这是因为lastName字段在newClass的实例外是不可访问的。注意字段定义的不同:任何使用this关键字定义的字段,都可以在类之外访问。而没有使用this定义的字段,都只能在类内部访问。该规则对方法同样适用。

复制代码 代码如下:

各种方式比较

1.当你需要创建一个很大的类,而且可能会有很复杂的实例,那么最好使用原型的方法
2.当你要创建一个单独的类,并且知道这个类只有一个实例,可以直接定义一个类
3.如果你的对象层级关系嵌套很多,或者需要一个动态方式定义一个对象,或者需要将对象序列化并且经过网络传输,或者需要重构一个从服务器传来的对象的时候,建议 使用JSON的方法

目录

function sayLoudly(){
alert(this.firstName.toUpperCase());
}
var newObject={
firstName:"frank",
sayName:function(){alert(this.firstName);},
sayLoudly:sayLoudly
};
//也可以这样
var newObject={
firstName:"frank",
sayName:function(){alert(this.firstName);},
sayLoudly:sayLoudly,
lastName:{
lastName:"ziggy",
sayName:function(){alert(this.lastName);}
}
};
newObject.lastName.sayName();

面向对象的好处:

1.隐藏数据

function newClass() {
this.firstName = "Frank";
lastName = "Zame";
}
var nc = new newClass();
alert(nc.firstName);
alert(nc.lastName);

注:第二个会打印undefind,只有加了this的字段才能在类外访问
2.可以调用其他对象中的函数

function newClass() {
this.firstName = "Frank";
this.toUC = string.toUpperCase;
this.toString = function() {
return this.toUC(this.firstName);
}
}
var nc = new newClass();
alert(nc);

《JavaScript实战》笔记

复制代码 代码如下:

JavaScript库

2.1.5 你应该使用哪种方法呢

前面的方法在功能上是相同的,在选择使用哪种方法时,可以参考一下准则:

  • 如果创建的类非常的大,而且它可能会有复杂的实例,那么几乎可以肯定要使用原型的方法,这样可以带来最好的内存使用效率。
  • 如果要创建一个单独的类,且知道这个类只有一个实例,这时更倾向与定义一个类,这样的代码是逻辑化最强、最类似与更全面的面向对象语言的,因此更易于项目中新开发人员的理解。
  • (1)如果你的对象层级嵌套关系很多或(2)你需要在一个动态方式中定义一个对象,那么JSON反复可能是个好的选择。如果需要将对象序列化并且通过网络进行传输,JSON方法也技术非常明显是首选。

复制代码 代码如下:

类的定义

本质:是一个函数
定义:

function newClass() {
alert("constructor");
this.firstName = "frank";
this.sayName = function() {
alert(this.firstName);
}
}
var nc = new newClass();
nc.sayName();

不足之处:每个实例都含有并存储类的属性(必须要)和方法(只想要一个地方存就可以了)

2.1.3 类的定义

在JavaScript中其实所有的东西都是一个对象,只有一小部分列外,比如一些内置的原语。其实,函数本身就是对象。当我们创建一个对象时,为了避免每次都从头开始,可以用更好的方法:创建一个类。

在JavaScript中,类其实就是一个函数。这个函数同样被当作类的构造函数来提供服务。例如,我们把newObject写作一个类,重命名为newClass:

function newClass(){
    alert("constructor");
    this.firstName = "frank";
    this.sayFirstName = function(){
        alert(this.firstName);
    }
}

var nc = new newClass();
nc.sayFirstName();

使用new newClass()就可以使用定义的类生成一个新的对象。

但这样也会引出一个问题:newClass每个实例都含有firstName的一个副本和sayFirstName方法的一个副本,那么每个实例都占用了更多的内存。如果所有实例能共享相同的sayFirstName()副本的话,是不是更好?确实,有这样的一种方法可以实现该效果。

function newClass(){
alert("constructor");
this.firstName="frank";
this.sayName=function(){alert(this.firstName);}
// return this;
}
//var nc=newClass();
var nc=new newClass();
//nc.firstName="ziggy"; is ok
nc.sayName();

柔性衰减和不唐突JavaScript

1.保持JavaScript的队医
2.允许柔性衰减
3.从不使用浏览器嗅探脚本来判断一个浏览器的能力
4.任何情况下都不要写浏览器不兼容的代码
5.合适的作用域变量
6.对于可访问性,避免需要鼠标事件触发的触发器

2.1.4 原型

JavaScript中的每一个独立的对象都有一个与之关联的原型(prototype)属性,它可以被看做一个简化的继承形式。基本上,他的工作方式是:当构造一个对象的新实例时,定义在对象的原型中的所有属性和方法,在运行时都会附着在那个新的实例上。例如:

function newClass(){
    this.firstName = "frank";
}

newClass.prototype.sayFirstName = function(){
    alert(this.firstName);
}

var nc = new newClass();
nc.sayFirstName();

与之前的例子不同,无论你创建了多少个newClass实例,内存中sayFirstName()函数都只会有一个单独的实例。这个方法实际是附加在每个实例上,而且this关键字还是在运行时被计算。所有this通常指向它所属的那个特定的newClass实例。

JavaScript 中的类,还有构造方法。。。
Java代码

使用JSON对象(JavaScript Object Notation)

1使用JSON创建前面的对象

function sayLoudly() {
alert(this.firstName.toUpperCase());
}
var newObject = {
firstName : "frank",
sayName : function() { alert(this.firstName) },
sayLoudly : sayLoudly
}

2.对象的嵌套(在newObject中嵌套LastName对象)

function sayLoudly() {
alert(this.firstName.toUpperCase());
}
var newObject = {
firstName : "frank",
sayName : function() { alert(this.firstName); },
sayLoudly : sayLoudly,
LastName : {
lastName :  "za",
sayName : function() { alert(this.lastName); }
}
}

2.1.2 使用JSON创建对象

JSON实际是JavaScript规范中的一个核心部分,最初的目的是为了快速简便地定义赋值的对象关系图,也就是那些嵌套与其他对象中的对象的实例。

JavaScript里的对象只是隐藏在面具下的关联数组。这就是JSON可以运转的原因。

下面是使用JSON创建一个newObject对象的例子:

function sayFirstName(){
    alert(this.firstName);
}

var newObject = {
    firstName:"frank",
    lastName:"tom",
    sayLastName:function(){alert(this.lastName;)},
    sayFirstName:sayFirstName
};

使用JSON和定义一个数组非常相似。对象中的函数可以是内联的(上例sayLastName()),也可以引用外部函数(上例sayFirstName())。

在JSON中,可以随意嵌套对象定义来创建对象的层级关系。入下,在newObject中加入了LastName对象。

function sayFirstName(){
    alert(this.firstName);
}

var newObject = {
    firstName:"frank",
    lastName:{
        name:"Tom",
        sayLastName:function(){alert(this.name);}
    },
    sayFirstName:sayFirstName
};

然后,可以通过newObject.LastName.sayLastName()来调用相关方法。

创建一个对象
Java代码

原型

目的:为了解决方法被存在每一个实例中的内存问题,此
原理:定义在对象的原型中欧的所有属性和方法,在运行时会附着在那个新的实例上

function newClass() {
this.firstName = "frank";
}
newClass.prototype.sayName = function() {
alert(this.firstName);
}
var nc = new newClass();
nc.firstName

注释:内存中sayName()函数只会有一个单独的实例,这个方法实际上是附加在每个实例上的,this是在运行时被计算的

  • 《JavaScript实战》笔记
    • 2.1 更多面向对象的JavaScript
      • 2.1.1 简单的对象创建
      • 2.1.2 使用JSON创建对象
      • 2.1.3 类的定义
      • 2.1.4 原型
      • 2.1.5 你应该使用哪种方法呢
      • 2.1.6 面向对象的好处

function sayLoudly(){
alert(this.name.toUpperCase());
}
function sayName(){
alert(this.name);
}
var newObject={
name:"frank",
sayName:sayName,
sayLoudly:sayLoudly,
lastName:{
name:"ziggy",
sayName:sayName
}
};
newObject.lastName.sayName();

简单对象的创建

1.创建一个对象

var newObject = new Object();

2.添加元素

newObject.firstName = "frank";

3.添加函数

newObject.sayName = function() {
alert(this.firstName)
} 

4.调用函数

newObject.sayName();

5.实质:实际上是关联数组,可以用一下方法来检索元素和调用函数

var theFirstName = newObject["firstName"];
newObject["sayName"] ();

6.基于逻辑调用函数

var whatFunction;
if (whatVolume == 1) {
whatFunction = "sayName"
}
if (whatVolume == 2) {
whatFunction = "sayLoudly"
}
newObject[whatFunction]();

7.使用已存在的函数进行添加函数

function sayLoudly() {
alert(this.firstName.toUpperCase());
}
newObject.sayLoudly = sayLoudly;

2.1 更多面向对象的JavaScript

JavaScript有不止一种方法创建对象。

复制代码 代码如下:

2.1.1 简单的对象创建

最简单的创建对象的方法是用一个新的Object开始,然后向其中添加内容。

要创建一个新Object,只需:

var newObject = new Object();

变量newObject现在指向一个Object的实例,Object是JavaScript中所有对象的基类。要给它增加一个叫firstName的元素,只需:

newObject.firstName = "frank";

也可以很容易地添加函数:

newObject.sayName = function(){
    alert(this.firstName);
}

现在调用newObject.sayName()就会弹出一个“frank”的警告信息。

与大多数成熟的面向对象语言不同,在JavaScript中,不必为对象实例创建类或蓝图。你可以在这里所写的那样,在运行时创建它。在对象的整个生命周期中都可以这么做。在网页中,这意味着可以在任何时候给对象添加属性和方法。

事实上,JavaScript实现只是把所有对象当坐关联数组。你可以这样检索newObject中firstName字段的值:

var theFirstName = newObject["firstName"];

同样的,可以这样调用sayName()函数:

newObject["sayName"]();

可以利用这个特点实现基于某种逻辑调用某个对象的方法:

var newObject = new Object();
newObject.firstName = "frank";
newObject.lastName = "tom";

newObject.sayFirstName = function(){
    alert(this.firstName);
}

newObject.sayLastName = function(){
    alert(this.lastName);
}

var funName = 1;
if(funName == 1 ){
    funName = "sayFirstName"
}
if(funName == 2 ){
    funName = "sayLastName"
}
newObject[funName]();

还可以这样来构造类
Java代码

利用json(javaScript Object Notation)创建对象和上面同样的效果。
Java代码

这样也ok
Java代码

function newClass(){
this.firstName="frank";
}
newClass.prototype.sayName=function(){
alert(this.firstName);
}
var nc=new newClass();
nc.firstName="ziggy";
nc.sayName();
var nc2=new newClass();
nc2.sayName();

一般用prototypes来添加方法,这样不管有多少个实例,在内存中只有一个sayName方法。

您可能感兴趣的文章:

  • JavaScript 三种创建对象的方法
  • JS 创建对象(常见的几种方法)
  • JavaScript 创建对象
  • js创建对象的几种常用方式小结(推荐)
  • js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
  • js创建对象的方法汇总
  • javascript的函数、创建对象、封装、属性和方法、继承
  • JavaScript创建对象的写法
  • JavaScript中使用Object.create()创建对象介绍
  • 跟我学习javascript创建对象(类)的8种方法
  • JavaScript创建对象方法实例小结

<script type="text/javaScript">
var newObject=new Object();
//创建一个对象
newObject.firstName="frank";
//增加一个firstName属性
newObject.sayName=function(){
alert(this.firstName);
}
//添加一个sayName方法
//调用sayName方法
// newObject.sayName();
// newObject["sayName"]();
var FirstName=newObject["firstName"];
var whatFunction;
// if(whatVolume==1){
// whatFunction="sayName";
// }else if(whatVolume==2){
// whatFunction="sayLoudly"
// }
// newObject[whatFunction]();
function sayLoudly(){
alert(this.firstName.toUpperCase());
}
newObject.sayLoudly=sayLoudly;
//另一种方式添加方法
newObject["sayLoudly"]();
</script>

复制代码 代码如下:

本文由时时app平台注册网站发布于web前端,转载请注明出处:JavaScript 创建对象和构造类实现代码【彩世界网址

关键词: