xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > JavaScript中的prototype原型学习指南,浅析在javasc

JavaScript中的prototype原型学习指南,浅析在javasc

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-10 21:40

这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类。,比如下面的天猫商城。

最近在看《javascript高级程序设计》(第二版)

原型是什么

图片 1

javascript中对象的创建

Function 类型有一个属性 prototype,直接翻译过来就是原型。这个属性就是一个指针,指向一个对象,这个对象包含一些属性和方法,这些属性和方法会被当前函数生成的所有实例(对象)所共享。

下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下。

•工厂模式

这句话根据前面所说的,细细琢磨下来,就可以得到下面代码:

图片 2

•构造函数模式

function Person(){
 ...
}
Person.prototype = {
 country : 'china',
 sayName : function(){
  ...
 }
}

主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作。

•原型模式

先创建了一个 Function 类型的实例 person,然后 person 的方法 prototype 是一个对象,就声明指向了一个对象。这个对象里面的属性和方法,会被当前 person 函数生成的实例所共享。也就是说:

同时利用hover为其添加了鼠标滑过时的效果。

•结合构造函数和原型模式

person1 = new Person();
person2 = new Person();

代码:

•原型动态模式

person1 和 person2 都是通过 Person 这个 Function 类型实例,再次生成的实例,它们俩都有共同的属性 country 和方法 sayName,因为它们都有某个指针(__proto__),直接指向 Person.prototype 所指向的对象。不过要注意 __proto__ 这个指针是不标准的,只有 Chrome 和 Firefox 等浏览器自己定义的,实际中,也不会用到这个属性,只是作为理解 prototype 来用:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <link href="css/style1.css" rel="stylesheet" type="text/css" />
  <script src="jquery-1.3.2.min.js"></script>
  <title></title>
  <script>
    $(function () {
      var $div_li = $("div.tab_menu ul li");
      $div_li.click(function () {       //定义了tan_menu对应的单击事件,也就是类别的单击事件。
        $(this).addClass("selected")
        .siblings().removeClass("selected");
        var index = $div_li.index(this);
        $("div.tab_box>div").eq(index).show()
        .siblings().hide();
      }).hover(function () {         //定义了鼠标滑过特效
        $(this).addClass("hover");
      }, function () {
        $(this).removeClass("hover");
      });
    });

  </script>
</head>
<body>
  <div class="tab">
    <div class="tab_menu">
      <ul>
        <li class="selected">时事</li>
        <li>体育</li>
        <li>娱乐</li>
      </ul>
    </div>
    <div class="tab_box">
      <div>时事</div>
      <div class="hide">体育</div>
      <div class="hide">娱乐</div>
    </div>
  </div>
</body>
</html>

面向对象的语言大都有一个类的概念,通过类可以创建多个具有相同方法和属性的对象。虽然从技术上讲,javascript是一门面向对象的语言,但是javascript没有类的概念,一切都是对象。任意一个对象都是某种引用类型的实例,都是通过已有的引用类型创建;引用类型可以是原生的,也可以是自定义的。原生的引用类型有:Object、Array、Data、RegExp、Function。 !引用类型就是一种数据结构,将数据和功能组织在一起,通常被称为类。 缺乏类概念的javascript中,需要解决的问题就是如何高效的创建对象。

图片 3

以上就是本文的全部内容,希望对大家熟练掌握实现选项卡切换的技巧有所帮助。

1.1.0.创建对象的一般方法

关于原型等用法,后面会更具体的讲到。

您可能感兴趣的文章:

  • 基于jQuery实现选项卡效果
  • jquery Banner轮播选项卡
  • jQuery EasyUI Tab 选项卡问题小结
  • 基于JQuery的6个Tab选项卡插件
  • jquery tools之tabs 选项卡/页签
  • jQuery之选项卡的简单实现
  • JQuery Tab选项卡效果代码改进版
  • jQuery实现选项卡切换效果简单演示
  • jQuery实现选项卡功能(两种方法)
var person = {}; //对象字面量表示,等同于var person = new Objcect();

person.name = 'evansdiy';
person.age = '22';
person.friends = ['ajiao','tiantian','pangzi'];
person.logName = function() {
  console.log(this.name);
}

创建对象的模式

基于Object引用类型,创建了一个对象,该对象包含四个属性,其中一个为方法。如果需要很多类似person的实例,那就会有许多重复的代码。

下面,我们就来看下创建对象的方法和常用模式,以及它们之间的优缺点。

1.1.1.工厂模式 [top]

1.工厂模式

通过一个可以包含了对象细节的函数来创建对象,然后返回这个对象。

就像工厂一样,抽象了创建具体对象的过程,用函数来封装以特定接口创建对象的细节。通过使用函数代替部分重复工作,代码如下:

function person(name,age,friends) {

  var o = {
    name: name,
    age: age,
    friends: friends,
    logName: function() {
      console.log(this.name);
    }
  };

  return o;

}

var person1 = person('Evansdiy','22',['ajiao','tiantian','pangzi']);
function createPerson(name, age, job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
  alert(this.name);
 };
 return o;
}
var person1 = createPerson("jiangshui","22","engineer");

每次调用person函数,都会通过该函数内部的对象o创建新的对象,然后返回,除此之外,这个为了创建新对象而存在的内部对象o没有其他的用途。另外,无法判断工厂模式创建的对象的类型。

这样就创建出来了一个人,工厂模式解决了多个相似对象重复创建问题,但是没有解决对象识别问题。只是单纯的创建了一个对象,而不管这个对象是从人类模版还是动物模版创建的,无法区分这个对象的类型。

1.1.2.构造函数模式 [top]

2.构造函数模式

function Person(name,age,job) {

  this.name = name;
  this.age = age;
  this.job = job;
  this.logName = function() {
    console.log(this.name);
  }

}

//通过new操作符创建Person的实例
var person1 = new Person('boy-a','22','worker');

var person2 = new Person('girl-b','23','teacher');

person1.logName(); //boy-a

person2.logName(); //girl-a

创建一个自定义的构造函数,从而定义自定义对象类型的属性和方法。

对比工厂模式,可以发现,这里并不需要创建中间对象,没有return。另外,可以将构造函数的实例标识为一种特定的类型,这就解决了对象识别的问题(通过检查实例的constructor属性,或利用instanceof操作符检查该实例是否通过某个构造函数创建)。

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = jpb;
 this.sayName = function(){
  alert(this.name);
 };
};
var person1 = new Person(...);

console.log(person1.constructor == Person);//constructor位于构造函数原型中,并指向构造函数,结果为true

3.构造函数模式与工厂模式区别:

console.log(person1 instanceof Person);//通过instanceof操作符,判断person1是否为构造函数Person的实例但构造函数模式也有自己的问题,实际上,logName方法在每个实例上都会被重新创建一次,需要注意的是,通过实例化创建的方法且并不相等,以下代码将会得到false:

  • 没有显式的创建对象。
  • 直接将属性和方法赋值 this 对象。
  • 没有 return 语句。

console.log(person1.logName == person2.logName);//false我们可以将方法移到构造器外部(变为全局函数)来解决这个问题:

Person 是 Function 类型的对象,new 之后,会继续产生一个对象,但这个新产生的对象,由于在函数中传递进去参数,并赋值给了 this 指针,那么传递进去的内容,就变成了新产生对象的属性或方法。

function logName() {
  console.log(this.name);
}

function logAge() {
  console.log(this.age);
}

构造函数默认习惯是首字母大写,上面代码执行经历了下面几个步骤:

但是,在全局下创建的全局函数实际上只能被经由Person创建的实例调用,这就有点名不副实了;如果方法很多,还需要逐一定义,缺少封装性。

  • 创建一个新对象
  • 将构造函数作用域赋值给新对象
  • 执行构造函数中的代码
  • 返回新对象

1.1.3.原型模式 [top]

这样生成的实例中,都默认包含一个 constructor 属性指向构造函数,例如:

javascript中的每一个函数都包含一个指向prototype属性的指针(大部分浏览器可以通过内部属性__proto__访问),prototype属性是一个对象,其中包含了由某种引用类型创建的所有实例共享的属性和方法。 

alert(person1.constructor == Person);
function Person() {}

Person.name = 'evansdiy';

Person.prototype.friends = ['ajiao','jianjian','pangzi'];

Person.prototype.logName = function() {
  console.log(this.name);
}

var person1 = new Person();

person1.logName();//'evansdiy'

所以用构造函数模式,有类型的区分,可以将它的实例标识为一种特定的类型。

以上代码做了这几件事情:

此外,构造函数就是普通的函数,因为要反馈得到新对象,所以用 new 来调用。如果不用的话,直接执行就跟普通函数一样,例如上面,执行 Person.sayName() 会弹出 window.name,因为函数在 window 下面执行,所以 this 指向 window。

1.定义了一个构造函数Person,Person函数自动获得一个prototype属性,该属性默认只包含一个指向Person的constructor属性;

构造函数模式也是有缺陷的,构造函数模式里面的方法,在每个实例上都重新创建了一遍,因此不同实例上的同名函数是不相等的。例如:

2.通过Person.prototype添加三个属性,其中一个作为方法;

person1.sayName == person2.sayName; //false

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:JavaScript中的prototype原型学习指南,浅析在javasc

关键词: mg4355线路检测