js之prototype,constructor,hasOwnProperty

最新推荐文章于 2023-02-01 17:59:40 发布

weixin_34319374

最新推荐文章于 2023-02-01 17:59:40 发布

阅读量114

点赞数

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/sundaren/blog/715875

版权

2019独角兽企业重金招聘Python工程师标准>>>

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); // 2
document.writeln(Student.prototype.count); // 1

var 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") ); // true
document.writeln( s.hasOwnProperty("sayHello") ); // true
// 以下属性继承自原型链，因此为false
document.writeln( s.hasOwnProperty("engine") ); // false
document.writeln( s.hasOwnProperty("sayHi") ); // false
document.writeln( s.hasOwnProperty("toString") ); // false

// 想要查看对象(包括原型链)是否具备指定的属性，可以使用in操作符
document.writeln( "engine" in s ); // true
document.writeln( "sayHi" in s ); // true
document.writeln( "toString" in s ); // true

转载于:https://my.oschina.net/sundaren/blog/715875