来自 软件资讯 2019-11-08 03:31 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

【奥门威尼斯网址】使用jQuery快速高效制作网页

1、对象:在JavaScript中,全部东西都是目的,如字符串、数值、数组、函数等。

JS创设对象的二种格局:工厂方式,构造函数形式,原型形式,混合情势,动态原型方式

JavaScript中的基本数据类型:

       number(数值类型)

     string(字符串类型)

   boolean(布尔类型)

   null(空类型)

   undefined(未定义类型)

   object:一种复杂的数据类型,该类型实例化的对象是一组数据和功能的集合;

对象是包含相关属性和方法的集合体

  属性

  方法

●什么是面向对象:

    ★面向对象仅仅是一个概念或者编程思想

     ★通过一种叫做原型的方式来实现面向对象编程

 

2、创设对象:对象分类:自定义对象、内置对象;

1 在工厂情势中,在构造函数内部创设三个新指标,最终回到那几个指标。当实例化时,我们没有必要用new关键字,宛如调用方法生机勃勃致就能够实例化。

●自定义对象:

★基于Object对象的方式创建对象,通过  . 添加属性和方法

          语法:var 对象名称=new Object();    //创建了一个对象

           对象名称.属性名="属性值";   //给对象添加属性                               

      对象名称.方法名=function(){    //给对象添加方法

          JavaScript语句

        }  

  Eg:

       var flower=new Object();

        flower.name="长春花";

        flower.genera="夹竹桃科长春花属";

       flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";

       flower.uses="观赏或用药等";

       flower.showName=function(){  

      alert(this.name); 

    }

       flower.showName();

★使用字面量赋值方式创建对象

  语法:var 对象名={

    属性名1:属性值1, 

    属性名2:属性值2, 

    方法名:function(){

       JavaScript语句

      }

    }  

    注:属性名和属性值之间用冒号,多个属性之间用逗号隔开;

Eg:

        var flower={

              name:"长春花",

              genera:"夹竹桃科长春花属",

              area:"非洲、亚热带、热带以及中国大陆的华东、西南、中南等地",

              uses:"观赏或用药等",

             showName:function(){

         alert(this.name);

       }

           }

    flower.showName();

●内置对象:

 常见的内置对象

  String(字符串)对象:length属性、indexOf( )方法、replace( )方法;

  Date(日期)对象:get×××:获取年、月、日、时、分、秒等等,set×××:设置年、月、日、时、分、秒等等;

    Array(数组)对象:length属性,sort( )、concat( )、join( )方法;

  Boolean(逻辑)对象:true或者false,toString( )方法;

  Math(算数)对象:round( )、max( )、min( )方法 ……;

  RegExp对象:RegExp是正则表达式的缩写;

附加:

  1. 简单对象的创建    使用对象字面量的方式{} 

  2.用function(函数)来模拟class (无参构造函数)

  3.使用工厂方式来创建(Object关键字)

  4.使用原型对象的方式  prototype关键字

  5.混合模式(原型和构造函数)

    6.动态原型的方式(可以看作是混合模式的一种特例)

厂子形式的破绽是轻巧和日常函数混淆,只好通过命名来认同它是一个构造函数。不推荐使用这种方式。

3、构造函数:

//factory pattern

●无论是基于Object创立对象,依然利用字面量赋值的格局成立对象,都有一个拾叁分显明的老毛病,那正是利用同一个接口供给成立超多目的,这样会发出大批量的重新代码。但是构造函数的面世缓和了这风度翩翩主题材料。

function createPerson(name, age, job){
    var o = {};
    o.name = name;
    o.age = age;
    o.job = job;
    o.friends = ["Mike", "Sun"];
    o.sayName = function(){
        alert("factory pattern: " + this.name);
    }
    return o;
}

●构造函数用来创设特定项目的靶子,像Object和Array那样的原生构造函数,在运转时会自动出今后施行情况中,其他,也得以创设自定义的构造函数。

var Abby = createPerson("Abby", "22", "Softwarre Engineer");
Abby.sayName();

 ●构造函数用来创设特定类型的对象,像Object和Array那样的原生构造函数,在运营时会自动出以往施行景况中,此外,也能够创立自定义的构造函数。

 

●表明构造函数语法:构造函数名称以大写字母初叶区分方法

2 构造函数形式,用new关键字来实例化对象。与工厂格局相比较,使用构造函数方式创制对象,无需在函数内部重新创造对象,而使用this指代,何况函数不要求显然return。不引入应用这种格局。

    Eg:

构造函数的弱项是连绵不断的正片,每new一回就造出二个别本,各样方法都要在各样实例上海重机厂复创立一遍,显明那样是可怜的,大家想要的是风姿洒脱种多少措施共享全数,有此方法私有,于是Eric发明了原型链。

  //带参构造函数

  function Person1(name, age, job, address) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.address = address;

    this.intro1 = function () {

        document.write("<br/>带参构造函数输出方式:<br/>"+"姓名:" + this.name + "<br/>年龄:" + this.age + "<br/>工作:" + this.job + "<br/>住址:" + this.address);

    }

}

//constructor pattern
function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert("constructor pattern: " + this.name);
    }
}

●调用:

var Abby = new Person("Abby", "22", "Software Engineer");
Abby.sayName();

   var person1 = new Person1("朗晓明", "38", "中国内地男演员、歌手", "中国北京海淀区");

   person1.intro1();

 

        var flower2=new Flower("牡丹","芍药科 芍药属","中国","赏鉴、食用或药用");
  flower2.showName();
  var flower3=new Flower("曼陀罗花","茄科 山茶花属","印度、中国西边","赏鉴或药用");
  flower3.showName();

 

●constructor属性:

3 原型情势,这里将要聊到prototype。咱们创设的各种函数都有有叁个prototype(原型卡塔 尔(阿拉伯语:قطر‎属性,它也是多少个指标,它的用场是含有有特定类型的全部实例的习性和措施。不引入使用这种情势。

      ★constructor属性指向弗Raul;

上边例子,大家把具备办法叁个个拉长到prototype上,但由于prototype上方式归属风度翩翩种分享,那个点子有些别人用的到,有些旁人根本用不到,有些旁人想用的远非的措施还要再度往prototype上丰富。那样就不佳了,所以最常用的形式其实是混合型的。

     alert(flower1.constructor==Flower);               //true

//prototype pattern
function Abby(){}

    alert(flower2.constructor==Flower);         //true

奥门威尼斯网址 ,Abby.prototype.name = "Abby";
Abby.prototype.age = "22";
Abby.prototype.sayName = function(){
    alert("prototype pattern: " + this.name);
}

    alert(flower3.constructor==Flower);         //true

var person1 = new Abby();
person1.sayName();

 ●instanceof操作符:使用instanceof操作符检查实验对象类型;(下边全体回来true卡塔尔

 

       alert(flower1 instanceof Object);

 

   alert(flower1 instanceof Flower);

4 构造函数形式和原型情势的交集类型。将装有属性不是措施的天性定义在函数中(构造函数方式卡塔尔,将具备属性值为艺术的属性利用prototype在函数之外定义(原型格局)。 推荐使用这种方法创制对象。

   alert(flower2 instanceof Object);

//hybrid constructor & prototype pattern
function Student(name, sno){
  this.name = name;
  this.sno = sno;
  this.sayName = function(){
    alert("hybrid constructor & prototype pattern: " + this.name);
  }
}

   alert(flower2 instanceof Flower);

Student.prototype = {
  constructor : Student,
  teacher : ["mike", "abby"],
  sayTeacher : function(){
    alert("hybrid constructor & prototype pattern(teacher): " + this.teacher);
  }
}

   alert(flower3 instanceof Object);

var zhangsan = new Student("zhangsan", "22");
var lisi = new Student("lisi", "23");
zhangsan.sayName();
lisi.sayName();
zhangsan.sayTeacher();
lisi.sayTeacher();

   alert(flower3 instanceof Flower);

 

调用构函数的4个步骤

 

  创造一个新对象

5 动态原型格局

  将构造函数的功用域赋给新指标(this就照准了那些新对象卡塔尔

动态原型方式可以预知为混合格局的多少个特例。该格局中,属性为艺术 的属性直接在函数中张开了概念,不过因为if从句进而确定保证开创该对象的实例时,属性的法子不会被再度创设。推荐应用这种方式。

  推行构造函数中的代码

//dynamic prototype pattern
function Person(){
  this.name = "Mike";
  this.age = 22;
}
if (typeof Person._lev == "undefined"){
   Person.prototype.lev = function(){
     return this.name;
   }
   Person._lev = true;
}

  再次来到新指标

var x = new Person();
alert(x.lev());

4、 原型对象:

 

●在JavaScript中开创的各样函数皆有叁个prototype属性,那几个性子是三个指南针,指向多少个对象,而那些指标的的用处是满含能够由特定项目标有所实例分享的习性和章程。

 

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:【奥门威尼斯网址】使用jQuery快速高效制作网页

关键词: