<meta name="keywords" content="华夏棋牌,JavaScript,prototype,原型,一连,js" />
华夏棋牌 > web前端 > js教程 > 注释

JavaScript中的prototype原型学习指南_基础知识

原创 2016-05-16 15:01:28 0 167
赞助会员专享特权
原型是甚么

华夏棋牌Function 类型有一个属性 prototype,直接翻译已往就是原型。这个属性就是一个指针,指向一个工具,这个工具网罗一些属性和措施,这些属性和措施会被以后函数天生的一着实例(工具)所共享。

华夏棋牌这句话凭证前面所说的,细细推想上去,便可以取得下面代码:

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

华夏棋牌先培植了一个 Function 类型的实例 person,然后 person 的措施 prototype 是一个工具,就声明指向了一个工具。这个工具外面的属性和措施,会被以后 person 函数天生的实例所共享。也就是说:

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

person1 和 person2 都是经由历程 Person 这个 Function 类型实例,再次天生的实例,它们俩都有合营的属性 country 和措施 sayName,由于它们都有某个指针(__proto__),直接指向 Person.prototype 所指向的工具。不外要重视 __proto__ 这个指针是不尺度的,只需 Chrome 和 Firefox 等浏览器自己界说的,现实中,也不会用到这个属性,只是作为明确 prototype 来用:

201659145452510.png (668×270)

华夏棋牌关于原型等用法,前面会更详细的讲到。

培植工具的形式

下面,我们就来看下培植工具的措施和经常应用形式,和它们之间的优弱点。

1.工厂形式

就像工厂一样,笼统了培植详细工具的历程,用函数来封装以特定接口培植工具的细节。经由历程应用函数取代部门重复使命,代码以下:

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");

华夏棋牌这样就培植出来了一小我,工厂形式处置赏罚赏罚了多个类似工具重复培植效果,但是没有处置赏罚赏罚工具识别效果。只是单纯的培植了一个工具,而岂论这个工具是从人类模版还是植物模版培植的,没法分辨这个工具的类型。

2.结构函数形式

华夏棋牌培植一个自界说的结构函数,从而界说自界说工具类型的属性和措施。

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

3.结构函数形式与工厂形式差异:

  • 没有显式的培植工具。
  • 直接将属性和措施赋值 this 工具。
  • 没有 return 语句。

Person 是 Function 类型的工具,new 以后,会一连发生一个工具,但这个新发生的工具,由于在函数中转达出来参数,并赋值给了 this 指针,那么转达出来的内容,就酿成了新发生工具的属性或措施。

结构函数默许习气是首字母年夜写,下面代码推行履历了下面几个法式模范:

  • 培植一个新工具
  • 将结构函数作用域赋值给新工具
  • 推行结构函数中的代码
  • 前往新工具

华夏棋牌这样天生的实例中,都默许网罗一个 constructor 属性指向结构函数,例如:

alert(person1.constructor == Person);

华夏棋牌以是用结构函数形式,有类型的分辨,可以将它的实例标识为一种特定的类型。

此外,结构函数就是浅易的函数,由于要反映取得新工具,以是用 new 来挪用。假定不用的话,直接推行就跟浅易函数一样,例以下面,推行 Person.sayName() 会弹出 window.name,由于函数在 window 下面推行,以是 this 指向 window。

华夏棋牌结构函数形式也是有弱点的,结构函数形式外面的措施,在每个实例上都重新培植了一遍,是以不合实例上的同名函数是不相等的。例如:

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

华夏棋牌也就是说,由结构函数天生的每个工具实例,属性和措施都是独占的,都是复制了一遍。属性独占是必须的,由于这正是工具之间不合的地方,但是许多措施功效和代码都是一样的,重复复制一再再三,显着就会铺张资源。

以是我们可以把函数放在外面,然后在结构函数外面,用指针指向这个函数,那么天生的实例中,措施存储的就是一个指向某函数的指针,也就共用一个函数了:

function Person(name, age){
 this.name = name;
 this.age = age;
 this.sayName = sayName;
}
function sayName(){
 alert(this.name);
}

但是这样,这个函数就酿成了全局函数,而且与 Person 结构函数联系关系性不强,没有封装性可言。

下面有请原型形式退场。

原型形式

华夏棋牌前面曾经简介了一部门关于原型的基础知识。质朴的说,就是每个函数都有一个 prototype 属性,指向一个工具(原型工具),这个工具外面可以放一些属性或许措施。然后这个函数天生的实例,会有一个不尺度的属性(__proto__)指向原型。

由此来看,你应当可以明确:prototype 发生的属性和措施是一着实例共享的。

华夏棋牌这样正利益置赏罚了下面结构函数形式中,实例中函数的共用效果。例以下面代码:

function Person(){
 ....
}
Person.prototype.name = "jiangshui";
Person.prototype.sayName = function(){
 alert(this.name);
};

var person1 = new Person();
person1.sayName(); //jiangshui

或许

Person.prototype = {
 constructor : Person,
 name : "jiangshui",
 sayName : function(){
  alert(this.name);
 }
};

华夏棋牌第二种措施笼罩了一切 prototype 工具,以是须要手动指定 constructor 属性,指向结构函数否则会指向 Object。

华夏棋牌梳理一下它们的关系:

  • Person.prototype -》 原型工具,可以界说一些属性或许参数,被一着实例共用。
  • Person.prototype.constructor == Person —》 原型工具有个默许的属性 constructor 指向该原型工具所属的结构函数(重视此外一种写法会笼罩掉落落这个属性,须要重新指定)。
  • person1 = new Person() -》结构函数天生实例,实例网罗了却构函数的内容和原型工具的内容。
  • person1.__proto__ -》指向培植这个实例的原型工具(不尺度,不要用)。

华夏棋牌应用 isPrototypeOf() 可以一定工具之间的关系。例如:

Person.prototype.isPrototypeOf(person1);

华夏棋牌现代码读取某个工具的某个属性,会推行搜索。先从以后工具泉源,假定没有,则搜索指针指向的原型工具,而不会搜索结构函数。工具实例可以会见但是不克不及重写原型工具的值。假照实例中设置了与原型工具同名的属性,则搜索历程,在实例中阻拦而不会会见原型工具,以是到达笼罩的目的。是以纵然这个属性设置为 null,也显露在实例中曾经存在该属性,而不会撤消掉落落这个属性,从而可以会见原型对应属性。

华夏棋牌以是须要应用 delete 操作符,完全删除实例属性,从而可以重新会见原型。

原型是静态的,对原型工具所做的任何修改,都能急速从实例上反映出来。启事是实例与原型之间的松懈链接关系,每次挪用实例的属性措施,都邑阻拦一次查询,假定原型变了,查询效果也就变了。

明确原型以后,我们也能够或许对原生工具添加新措施或属性。Object、Array、String 等原生援用类型,与下面结构函数类似,我们可以用 prototype 扩年夜它们的措施。例如:

String.prototype.startsWith = function(text){
 return this.indexOf(text) == 0;
};
var msg = "Hello World";
msg.startsWith("Hello");

这段代码为 String 这个原生援用类型,增添了一个 startsWith 措施,功效就是转达出来一个参数,看看要测试的字符串能否以参数泉源。由于原型的静态性,以是只需推行一下,一切字符串类型的变量全都取得了这个措施。

但是不推荐应用这个措施,假定用的太多,代码太多,会招致掩护艰辛、代码重大等情形。浅易情形下,会先一连某个原生援用类型,然后再在新自界说的类型上培植。关于一连,前面会再总结。

原型形式也不是万能的,原型中的一切属性和措施是被一着实例共享的,以是关于函数之类异常合适,而关于网罗援用类型的属性来讲,就会发生一些抵触。例如:

function Person(){}
Person.prototype = {
 constructor : Person,
 friends : ["greg","jack"]
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("tom");
console.log(person2.friends);

你会在 console 中看到,person2 的 friends 多了一个 tom,这着实不是我想要的,但是对 person1 界说他的同伙时,着实着实影响到了实例 person2。

以是我们要联络原型形式和结构函数形式来应用。

组合应用结构函数形式和原型形式

这就是最经常应用的形式,结构函数用来界说实例属性,经由历程转达参数完成自界说;原型用来界说措施或许须要一着实例共享的属性。这样,既完成了自界说,又保证了共用,还防止了效果。

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.friends = ["greg","jack"];
}
Person.prototype = {
 constructor : Person,
 sayName : function(){
  alert(this.name);
 }
};
var jiangshui = new Person("jiangshui","22","engineer");

现实应用示例

华夏棋牌OK,到了这里,你能够会看懂原型是啥,和若何培植工具,可是,这些又有甚么用?确切,我之前的使命,一直也就是用 jQuery 写一些代码便可以了,基本用不到封装然后天生工具完告成能等。那这些现实有甚么用?

这类开发要领主要用于模块化和组建化的开发。好比你经常应用的弹窗功效,你虽然可以把弹窗有关代码,每次都粘贴复制,然后修改一下便可以用在项目外面了。更好的选择是把你的弹窗功效代码,笼统封装成这样的一个组件,这样当你须要用弹窗的时间,只须要转达参数天生一个弹窗实例,便可以挪用了。

原型工具和原型链

华夏棋牌在Javascript中,万物皆工具,但工具也有差异,年夜致可以分为两类,即:浅易工具(Object)和函数工具(Function)。

华夏棋牌浅易而言,经由历程new Function发生的工具是函数工具,其他工具都是浅易工具。

举例诠释:

function f1(){
  //todo
}
var f2 = function(){
  //todo
};
var f3 = new Function('x','console.log(x)');
 
var o1 = {};
var o2 = new Object();
var o3 = new f1();
 
console.log(
  typeof f1,//function
  typeof f2,//function
  typeof f3,//function
  typeof o1,//object
  typeof o2,//object
  typeof o3 //object
);
>> function function function object object object

华夏棋牌f1属于函数的声明,最有数的函数界说要领,f2现实上是一个匿名函数,把这个匿名函数赋值给了f2,属于函数表达式,f3不有数,但也是一种函数工具。

华夏棋牌Function是JS自带的工具,f1,f2在培植的时间,JS会自动经由历程new Function()的要领来构建这些工具,是以,这三个工具都是经由历程new Function()培植的。

在Javascript中培植工具有两种要领:工具字面量和应用new表达式,o1和o2的培植正好对应了这两种要领,重点讲一下o3, 假定用Java和C#的思绪来明确的话,o3是f1的实例工具,o3和f1是统一类型,至少我之前这么以为,着实否则…

那么怎样明确呢? 很质朴,看o3是不是经由历程new Function发生的, 显着不是,既然不是函数工具,那就是浅易工具 。

经由历程对函数工具和浅易工具的质朴明确以后,我们再来明确一下Javascript中的原型和原型链:

在JS中,每当培植一个函数工具f1 时,该工具中都邑内置一些属性,其中网罗prototype和__proto__, prototype即原型工具,它纪录着f1的一些属性和措施。

须要重视的是,prototype 对f1是弗私见的,也就是说,f1不会查找prototype中的属性和措施。

function f(){}
f.prototype.foo = "abc";
console.log(f.foo); //undefined

华夏棋牌那么,prototype有甚么用呢? 着实prototype的主要作用就是一连。 浅易一点讲,prototype中界说的属性和措施都是留给自己的“子女”用的,是以,子类完全可以会见prototype中的属性和措施。

想要知道f1是若何把prototype留给“子女”,我们须要明确一下JS中的原型链,此时,JS中的 __proto__ 入场了,这哥们长的很希奇,隐藏的也很深,以致于你常有数不到它,但它在浅易工具和函数工具中都存在, 它的作用就是生涯父类的prototype工具,JS在经由历程new 表达式培植一个工具的时间,通常会把父类的prototype赋值给新工具的__proto__属性,这样,就组成了一代代传承…

function f(){}
f.prototype.foo = "abc";
var obj = new f();
console.log(obj.foo); //abc

现在我们知道,obj中__proto__生涯的是f的prototype, 那么f的prototype中的__proto__中生涯的是甚么呢? 看下图:

201659150626664.png (515×122)

如图所示,f.prototype的__proto__中生涯的是Object.prototype,Object.prototype工具中也有__proto__,而从输入效果看,Object.prototype.__proto__ 是null,体现obj工具原型链的终结。以下图所示:

201659150641500.png (607×148)

obj工具具有这样一个原型链以后,当obj.foo推行时,obj会先查找自己能否有该属性,但不会查找自己的prototype,当找不到foo时,obj就沿着原型链按序去查找…

不才面的例子中,我们在f的prototype上界说了foo属性,这时间间obj就会在原型链上找到这个属性并推行。

php中文网最新课程二维码
  • 相关标签:JavaScript prototype 原型 一连 js
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 原生javascript完因素享到同伙圈功效 支持ios和android_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • JS完成登录页面记着密码和enter键登录措施推荐_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • JavaScript中的prototype原型学习指南_基础知识
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173683)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(169819)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137197)

    ThinkPHP5实战之[教授修养治理系统]

    本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130522)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(129868)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节