prototype:本质上是一个JavaScript对象。 示例&说明 众所周知,JavaScript中的类都是以函数的形式进行声明的。因为JavaScript中没有其他语言中类似class Cl
prototype:本质上是一个JavaScript对象。
示例&说明
众所周知,JavaScript中的类都是以函数的形式进行声明的。因为JavaScript中没有其他语言中类似class ClassName{ }
形式的类声明,而是把函数当作类来使用,函数名就是类名,函数本身就是类的构造函数,并且可以使用new
关键字来创建一个实例对象。通过这种形式创建的实例对象,它们的属性和方法都是独立存在的,对一个对象的属性和方法进行添加/删除,并不会影响到另一个"同类"对象。
下面我们来看一个具体的例子。
// 在JavaScript中类都是以函数的形式来定义的function Student(name, age){ // 类的属性 this.name = name; this.age = age; // 类的方法 this.sayHi = function(){ document.writeln("大家好,我叫" + this.name + ",今年" + this.age + "岁"); };}// 创建一个Student对象:小明var xm = new Student("小明", 18);xm.sayHi(); // 大家好,我叫小明,今年18岁// 创建一个Student对象:小红var xh = new Student("小红", 16);xh.sayHi(); // 大家好,我叫小红,今年16岁
现在我们为对象"小明"添加一个考试的方法exam()
,"小红"不会受到影响。
// 为小明添加一个考试的方法xm.exam = function(){ document.writeln(this.name + "在考试...");};// 调用小明的exam()xm.exam();// 调用小红的exam()// xh.exam(); //将会报错,因为"小红"没有exam()方法
小明和小红的sayHi()
方法也不是同一个方法,而是两个毫不相关的方法。我们删除小红的sayHi()
方法,也不会对小明产生影响。
// 小红与小明的sayHi()方法不是同一个方法document.writeln(xm.sayHi == xh.sayHi); // false// 删除小红的sayHi()方法delete xh.sayHi;xm.sayHi(); // 正常输出:大家好,我叫小明,今年18岁// xh.sayHi(); //将会报错,因为该方法已经被删除
同样的,Student
的这两个实例对象的属性也是独立存在的。属性独立存在还稍微可以理解,但是连方法都是独立存在的,这样的设计就造成了极大的资源浪费。至于属性,有些时候我们也是希望能够在两个对象内部共享一些属性的。于是JavaScript的设计者布兰登·艾奇(Brendan Eich)就想到在函数中添加一个prototype
属性,这个属性用来保存一些供所有"同类"实例对象共享使用的属性和方法。
当我们访问一个实例对象的属性和方法时,JavaScript先查找对象本身是否存在这些属性或方法,如果有就直接返回;如果不具备,就查询创建该对象的类(即函数)的prototype
属性中是否存在同名的属性或方法,如果有就返回。由于prototype
属性本身就是一个对象(一般称之为原型对象),这看起来就有点像"继承":实例对象"继承"了prototype
对象的属性和方法。
现在,我们重新改造Student
"类",将sayHi()
方法放入prototype
属性中,并添加一个共享的count
属性,用于保存通过该函数创建的对象的个数。
// 在JavaScript中类都是以函数的形式来定义的function Student(name, age){ // 类的属性 this.name = name; this.age = age; // prototype上的count属性 // 如果已存在该属性就+1,没有就声明并赋值为1 Student.prototype.count && Student.prototype.count++ || ( Student.prototype.count = 1 ); // prototype上的sayHi()方法 Student.prototype.sayHi = function(){ document.writeln("大家好,我叫" + this.name + ",今年" + this.age + "岁"); };}// 创建一个Student对象:小明var xm = new Student("小明", 18);xm.sayHi(); // 大家好,我叫小明,今年18岁// 创建一个Student对象:小红var xh = new Student("小红", 16);xh.sayHi(); // 大家好,我叫小红,今年16岁// 小红与小明的sayHi方法是同一个方法document.writeln(xm.sayHi == xh.sayHi); // true//function(){ document.writeln("大家好,我叫" + this.name + ",今年" + this.age + "岁"); };// 两个对象的count属性输出一致document.writeln("xm.count = " + xm.count + " / xh.count = " + xh.count); //
这个时候,我们删除prototype
属性上的属性或方法,因为这些属性或方法是共享的,因此所有的实例对象都会受到影响。
// 删除prototype属性上的sayHi()方法delete Student.prototype.sayHi;// 将会报错,小明和小红的sayHi()方法均已丢失// xm.sayHi();// xh.sayHi();// 属性也是如此,此处不再举例
此外,我们还可以直接更改自定义类(函数)的prototype
属性,我们可以将上面的Student进行如下改造。
//在JavaScript中类都是以函数的形式来定义的function Student(name, age){ // 类的属性 this.name = name; this.age = age; Student.prototype.count++;}// 直接修改prototype属性Student.prototype = { count : 0 ,sayHi : function(){ document.writeln("大家好,我叫" + this.name + ",今年" + this.age + "岁"); }};var xm = new Student("小明", 12);xm.sayHi();document.writeln(xm.count); // 1// 无法通过实例对象直接为prototype上的属性赋值// 这样做只是在当前实例对象上添加了一个同名的属性,并屏蔽了对prototype上同名属性的访问// 该对象之后访问的count属性属于对象自身的,而不是prototype属性上的xm.count = xm.count + 1;document.writeln(xm.count); // 2document.writeln(Student.prototype.count); // 1var xh = new Student("小红", 15);document.writeln(xh.count); // 2
此外,我们也可以通过JavaScript内置对象的prototype
属性,为内置对象添加一些属性或方法。
// 为JavaScript内置对象String添加sayHi()方法String.prototype.sayHi = function(){ document.writeln("你好," + this);};var str = "张三";str.sayHi(); // 你好,张三
constructor:
对象的constructor
属性用于返回创建该对象的函数,也就是我们常说的构造函数。
在JavaScript中,每个具有原型的对象都会自动获得constructor
属性。除了arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression等一些特殊对象之外,其他所有的JavaScript内置对象都具备constructor
属性。例如:Array
、Boolean
、Date
、Function
、Number
、Object
、String
等。
// 字符串:String()var str = "张三";document.writeln(str.constructor); // function String() { [native code] }document.writeln(str.constructor === String); // true// 数组:Array()var arr = [1, 2, 3];document.writeln(arr.constructor); // function Array() { [native code] }document.writeln(arr.constructor === Array); // true// 数字:Number()var num = 5;document.writeln(num.constructor); // function Number() { [native code] }document.writeln(num.constructor === Number); // true// 自定义对象:Person()function Person(){ this.name = "CodePlayer";}var p = new Person();document.writeln(p.constructor); // function Person(){ this.name = "CodePlayer"; }document.writeln(p.constructor === Person); // true// JSON对象:Object()var o = { "name" : "张三"};document.writeln(o.constructor); // function Object() { [native code] }document.writeln(o.constructor === Object); // true// 自定义函数:Function()function foo(){ alert("CodePlayer");}document.writeln(foo.constructor); // function Function() { [native code] }document.writeln(foo.constructor === Function); // true// 函数的原型:bar()function bar(){ alert("CodePlayer");}document.writeln(bar.prototype.constructor); // function bar(){ alert("CodePlayer"); }document.writeln(bar.prototype.constructor === bar); // true
hasOwnProperty()与for in的区别
1 . for in可以获取object的所有属性,包括自定义属性以及原型链属性。
2. hasOwnProperty()只能获取自定义属性,无法获取原型链属性。
JS hasOwnProperty() 函数详解
hasOwnProperty()
函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有,返回true
,否则返回false
。
该方法属于Object
对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法。
语法
object.hasOwnProperty( propertyName )
参数
参数 | 描述 |
---|---|
propertyName | String类型指定的属性名称 |
返回值
hasOwnProperty()
函数的返回值为Boolean类型。如果对象object
具有名称为propertyName
的属性,则返回true
,否则返回false
。
此方法不会检查对象的原型链中是否存在该属性,该属性只有是对象本身的一个成员才会返回true
。
示例&说明
function Site(){ this.name = "CodePlayer"; this.url = "http://www.365mini.com/"; this.sayHello = function(){ document.writeln("欢迎来到" + this.name); };}var obj = { engine: "PHP" ,sayHi: function(){ document.writeln("欢迎访问" + this.url); }};// 使用对象obj覆盖Site本身的prototype属性Site.prototype = obj;var s = new Site();document.writeln( s.hasOwnProperty("name") ); // truedocument.writeln( s.hasOwnProperty("sayHello") ); // true// 以下属性继承自原型链,因此为falsedocument.writeln( s.hasOwnProperty("engine") ); // falsedocument.writeln( s.hasOwnProperty("sayHi") ); // falsedocument.writeln( s.hasOwnProperty("toString") ); // false// 想要查看对象(包括原型链)是否具备指定的属性,可以使用in操作符document.writeln( "engine" in s ); // truedocument.writeln( "sayHi" in s ); // truedocument.writeln( "toString" in s ); // true