JS构造函数与原型详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Joe_yuqiao/article/details/119327853

JS的构造函数

了解构造函数之前先了解一个概念——工厂模式。

工厂模式是软件工程领域一种广为人知的设计模式，这种模式抽象了创建具体对象的过程。考虑到在ECMAScript中无法创建类，开发人员就发明了一种函数，用函数来封装以特定接口创建对象的细节

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("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
/* 函数createPerson()能够根据接受的参数来构建一个包含所有必要信息的Person对象。
可以无数次地调用这个函数，而每次它都会返回一个包含三个属性一个方法的对象。
工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）。*/

1、什么是构造函数？

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在JS中，使用构造函数时要注意以下两点：

构造函数用于创建某一类对象，其首字母要大写
构造函数要和new一起使用才有意义

2、new的作用

new在执行时会做四件事情

在内存中创建一个新的空对象。
让this指向这个新的对象（将构造函数的作用域赋给新对象）。
执行构造函数里面的代码，给这个新对象添加属性和方法
返回这个新对象（所以构造函数里面不需要 return）

如果我们在调用一个构造器函数时忽略了new操作符，尽管代码不会出错，但结果却不是我们想要的：

var h = Hero('Leonardo');
typeof h; // "undefined"

/* 由于这里没有使用new操作符，因此我们不是在创建一个新的对象。
这个函数调用与其他函数并没有区别，这里的h值应该就是该函数的返回值。而由于该函数没有显式返回值（它没有使用关键字 return），所以它实际上返回的是undefined值，并将该值赋值给了h。

在这种情况下this引用的是全局对象。*/

3、与工厂模式对比

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

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

在这个例子中，Person()函数取代了createPerson()函数。我们注意到，Person()中的代码除了与createPerson()中相同的部分外，还存在以下不同之处：

没有显式地创建对象；
直接将属性和方法赋给了this对象；
没有return语句。

此外，还应该注意到函数名Person使用的是大写字母P。按照惯例，构造函数始终都应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。这个做法借鉴自其他OO语言，主要是为了区别于ECMAScript中的其他函数；因为构造函数本身也是函数，只不过可以用来创建对象而已。
要创建Person的新实例，必须使用new操作符。

在前面例子的最后，person1和person2分别保存着Person的一个不同的实例。这两个对象都有一个constructor（构造函数）属性，该属性指向Person，如下所示。

alert(person1.constructor == Person);  //true
alert(person2.constructor == Person);  //true

对象的constructor属性最初是用来标识对象类型的。但是，提到检测对象类型，还是instanceof操作符要更可靠一些。我们在这个例子中创建的所有对象既是Object的实例，同时也是Person的实例，这一点通过instanceof操作符可以得到验证。
通过 instanceof 操作符，我们可以测试一个对象是不是由某个指定的构造器函数所创建的

alert(person1 instanceof Object);  //true
alert(person1 instanceof Person);  //true
alert(person2 instanceof Object);  //true
alert(person2 instanceof Person);  //true
创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方。
在这个例子中，person1和person2之所以同时是Object的实例，是因为所有对象均继承自Object。

 以这种方式定义的构造函数是定义在Global对象（在浏览器中是window对象）中的。

4、静态成员与实例成员

JavaScript的构造函数中可以添加些成员，可以在构造函数本身上添加，也可以在构造函数内部的this上添加。通过这两种方式涿加的成员，就分别称为静态成员和实例成员

	静态成员：在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问

	实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问

function Star(uname,uage) {
    this.name = uname; // 实例成员name
    this.age = uage; // 实例成员age
    this.sing = function () { // 实例成员sing
        console.log('我会唱歌')
    }
}
let ltw = new Star('刘天王',18)
Star.sex = '男' // 静态成员sex

console.log(ldh.name)
console.log(Star.name) // undefined 不能通过构造函数访问实例成员

console.log(Star.sex)
console.log(ldh.sex) // undefined 不能通过对象来访问

5、构造函数当作普通函数

构造函数与其他函数的唯一区别，就在于调用它们的方式不同。不过，构造函数毕竟也是函数，不存在定义构造函数的特殊语法。任何函数，只要通过new操作符来调用，那它就可以作为构造函数；而任何函数，如果不通过new操作符来调用，那它跟普通函数也不会有什么两样。例如，前面例子中定义的Person()函数可以通过下列任何一种方式来调用。

// 当作构造函数使用
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName(); //"Nicholas"

// 作为普通函数调用
Person("Greg", 27, "Doctor"); // 添加到window
window.sayName(); //"Greg"

// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName(); //"Kristen"

/* 这个例子中的前两行代码展示了构造函数的典型用法，即使用new操作符来创建一个新对象。
接下来的两行代码展示了不使用new操作符调用Person()会出现什么结果：属性和方法都被添加给window对象了。
当在全局作用域中调用一个函数时，this对象总是指向Global对象（在浏览器中就是window对象）。因此，在调用完函数之后，可以通过window对象来调用sayName()方法，并且还返回了"Greg"。
最后，也可以使用call()（或者apply()）在某个特殊对象的作用域中调用Person()函数。这里是在对象o的作用域中调用的，因此调用后o就拥有了所有属性和sayName()方法。*/

6、构造函数的不足——为什么需要使用原型

使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。在前面的例子中，person1和person2都有一个名为sayName()的方法，但那两个方法不是同一个Function的实例。不要忘了——ECMAScript中的函数是对象，因此每定义一个函数，也就是实例化了一个对象。从逻辑角度讲，此时的构造函数也可以这样定义。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function("alert(this.name)"); // 与声明函数在逻辑上是等价的
}

每个Person实例都包含一个不同的Function实例（以显示name属性），以这种方式创建函数，会导致不同的作用域链和标识符解析，但创建Function新实例的机制仍然是相同的。
因此，不同实例上的同名函数是不相等的，以下代码可以证明这一点。

alert(person1.sayName == person2.sayName);  //false

然而，创建两个完成同样任务的Function实例的确没有必要；况且有this对象在，根本不用在执行代码前就把函数绑定到特定对象上面。
当两个不同的实例对象都调用构造函数中的同一方法时，会创建两个不同的变量空间来，这会浪费内存。
因此，可以通过把函数定义转移到构造函数外部来解决这个问题。

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

function sayName(){
    alert(this.name);
}

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

/* 在这个例子中，我们把sayName()函数的定义转移到了构造函数外部。而在构造函数内部，我们将sayName属性设置成等于全局的sayName函数。这样一来，由于sayName包含的是一个指向函数的指针，因此person1和person2对象就共享了在全局作用域中定义的同一个sayName()函数。
这样做确实解决了两个函数做同一件事的问题，可是新问题又来了：在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实。而更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多个全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在，这些问题可以通过使用原型模式来解决。*/

JS中的原型

1、什么是原型？

原型（prototype）的实质 —— 一个对象，也称为原型对象

	原型的作用 —— 共享方法

一般我们把公共属性定义到构造函数里面，公共方法放到原型对象上

2、判断一个对象的某个属性到底是自身属性还是原型链中属性

hasOwnProperty()
例如，我们想知道toString属性来自于哪里

toy.toString();
"[object Object]"
toy.hasOwnProperty('toString'); // false

toy.constructor.hasOwnProperty('toString'); // false

toy.constructor.Protoype.hasOwnProperty('toString'); // false

Object.hasOwnProperty('toString'); // false

Object.prototype.hasOwnProperty('toString'); // true

3、判断当前对象是否是另一个对象的原型

isPrototypeOf()

// 先来定义一个简单的对象monkey：

var monkey = {
	hair: true,
	feeds: 'bananas',
	breathes: 'air'
};

// 再创建一个叫做 Human()的构造器函数，并将其原型属性设置为指向monkey：

function Human(name) {
	this.name = name;
}

Human.prototype = monkey;

// 现在，如果新建一个叫做george的Human对象，并提问“monkey是george的原型吗？”，答案是true。

var george = new Human('George');
monkey.isPrototypeOf(george); // true

4、查找某对象的原型

getPrototypeOf()
大多数浏览器都实现了ES5的Object.getPrototypeOf()方法

Object.getPrototypeOf(george).feeds; // "banana"

Object.getPrototypeOf(george) === monkey; // true

而对于另一部分实现了ES5部分功能，却没有实现getPrototypeOf()方法的浏览器，我们可以使用特殊属性__proto__

5、对象原型 `proto`

__proto__是对象的一个属性，指向原型对象prototype

__proto__、prototype与constructor

ldh.__proto__.constructor === Star.prototype.constructor // true

6、修改原型对象 `prototype`：

6.1、单个增加某属性or方法：

构造函数.prototype.属性名or方法名 = 需要添加的属性内容or方法；
不会完全覆盖原先的prototype，因为他只是单次增添或修改了单个属性。

var friend = new Person();

Person.prototype.sayHi = function(){
    alert("hi");
};

friend.sayHi();   //"hi"（成功执行！）

6.2、重写整个原型对象：

function Person(){
}

var friend = new Person();

Person.prototype = {
	/* 每创建一个函数，就会同时创建它的prototype对象，这个对象也会自动获得constructor属性。
	而我们在这里使用的语法，本质上完全重写了默认的prototype对象，因此constructor属性也就变成了新对象的constructor属性（指向Object构造函数），不再指向Person函数。
	此时，尽管instanceof操作符还能返回正确的结果，但通过constructor已经无法确定对象的类型了,可以像下面这样特意将它设置回适当的值 */
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};
// 把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系，
// 实例中的指针仅指向原型，而不指向构造函数。

注意1: 以这种方式重设constructor属性会导致它的[[Enumerable]]特性被设置为true。默认情况下，原生的constructor属性是不可枚举的。
因此如果你使用兼容ECMAScript 5的JavaScript引擎，可以试一试Object.defineProperty()。

function Person(){
}

Person.prototype = {
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
}; 
//重设构造函数，只适用于ECMAScript 5兼容的浏览器
Object.defineProperty(Person.prototype, "constructor", {
    enumerable: false,
    value: Person
});

注意2: 重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的联系；它们引用的仍然是最初的原型

function Person(){
}; 
// 修改原型对象之前创建的对象
let friend1 = new Person();

Person.prototype = {
    constructor : Person,
    name : "Nicholas",
    age : 29,
    job: "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
}; 
// 修改原型对象后新建的对象
let friend2 = new Person();

friend1.sayName(); // error
friend2.sayName(); // 成功执行

7、使用原型对象可能面临的问题

7.1、原型模式的最大问题是由其共享的本性所导致的

原型中所有属性是被很多实例共享的，这种共享对于函数非常合适。对于那些包含基本值的属性倒也说得过去，毕竟（如前面的例子所示），通过在实例上添加一个同名属性，可以隐藏原型中的对应属性。然而，对于包含引用类型值的属性来说，问题就比较突出了。

function Person(){
}

Person.prototype = {
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    friends : ["Shelby", "Court"],
    sayName : function () {
        alert(this.name);
    }
};

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

person1.friends.push("Van");

alert(person1.friends);    //"Shelby,Court,Van"
alert(person2.friends);    //"Shelby,Court,Van"
alert(person1.friends === person2.friends);  //true

/* Person.prototype 对象有一个名为friends的属性，该属性包含一个字符串数组。然后，创建了Person的两个实例。
接着，修改了person1.friends 引用的数组，向数组中添加了一个字符串。由于friends数组存在于Person.prototype 而非person1中，所以刚刚提到的修改也会通过person2.friends （与person1.friends 指向同一个数组） 反映出来。
假如我们的初衷就是像这样在所有实例中共享一个数组，那么对这个结果没有问题。可是，实例一般都是要有属于自己的全部属性的。而这个问题正是很少有人单独使用原型模式的原因所在。*/

解决方案

组合使用构造函数模式和原型模式

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
}

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

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

person1.friends.push("Van");
alert(person1.friends);    //"Shelby,Count,Van"
alert(person2.friends);    //"Shelby,Count"
alert(person1.friends === person2.friends);    //false
alert(person1.sayName === person2.sayName);    //true

/* 在这个例子中，实例属性都是在构造函数中定义的，而由所有实例共享的属性constructor和方法sayName()则是在原型中定义的。而修改了person1.friends（向其中添加一个新字符串），并不会影响到person2.friends，因为它们分别引用了不同的数组。

这种构造函数与原型混成的模式，是目前在ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说，这是用来定义引用类型的一种默认模式。*/

7.2、可能意外地重写原生方法或导致命名冲突

所有的原生引用类型（Object、Array、String，等等）都在其构造函数的原型上定义了方法。例如，在Array.prototype中可以找到sort()方法，而在String.prototype中可以找到substring()方法。
通过原生对象的原型，不仅可以取得所有默认方法的引用，而且也可以定义新方法。可以像修改自定义对象的原型一样修改原生对象的原型，因此可以随时添加方法。
但我们不推荐在产品化的程序中修改原生对象的原型。如果因某个实现中缺少某个方法，就在原生对象的原型中添加这个方法，那么当在另一个支持该方法的实现中运行代码时，就可能会导致命名冲突。而且，这样做也可能会意外地重写原生方法。

解决方案——使用动态原型模式

动态原型模式把所有信息都封装在了构造函数中，而通过在构造函数中初始化原型（仅在必要的情况下），又保持了同时使用构造函数和原型的优点。换句话说，可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型，如果新增的方法不是原生的（或者说未被添加过），就可以被添加进去。

function Person(name, age, job){

    //属性
    this.name = name;
    this.age = age;
    this.job = job;

    //方法
    if (typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            alert(this.name);
        };
    }
}

var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

/* 注意构造函数代码中方法的部分。这里只在sayName()方法不存在的情况下，才会将它添加到原型中。这段代码只会在初次调用构造函数时才会执行。此后，原型已经完成初始化，不需要再做什么修改了。
不过要记住，这里对原型所做的修改，能够立即在所有实例中得到反映。因此，这种方法确实可以说非常完美。
其中，if语句检查的可以是初始化之后应该存在的任何属性或方法——不必用一大堆if语句检查每个属性和每个方法；只要检查其中一个即可。对于采用这种模式创建的对象，还可以使用instanceof操作符确定它的类型。

使用动态原型模式时，不能使用对象字面量重写原型。前面已经解释过了，如果在已经创建了实例的情况下重写原型，那么就会切断现有实例与新原型之间的联系。*/

8、原型链

实例对象既然作为对象有一个__proto__属性，指向构造函数的原型对象prototype，那么构造函数的原型对象prototype理论上也可以有一个__proto__属性，实际上原型对象的prototype确实有一个__proto__属性，指向Object构造函数的原型对象；Object构造函数的原型对象的__proto__为null

原型链

9、JS的成员查找机制

当访问一个对象的属性（包括方法）时，首先找这个对象自身有没有该属性;
如果没有就查找它的原型（也就是_ proto_指向的 prototype原型对象）;
如果还没有就查找原型对象的原型（Object的原型对象）;
依此类推一直找到 Object为止（null）

10、原型与`in`操作符

有两种方式使用in操作符：单独使用和在for-in循环中使用。在单独使用时，in操作符会在通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是原型中。
hasOwnProperty()只在属性存在于实例中时才返回true，因此只要in操作符返回true而hasOwnProperty()返回false，就可以确定属性是原型中的属性。

// 拓展——自定义判断原型中的属性的方法
function hasPrototypeProperty(object, name){
    return !object.hasOwnProperty(name) && (name in object);
}

构造函数和原型对象中的this指向

构造函数和原型对象里的this都是指向实例对象

function Star(uname, uage) {
    this.name = uname; // this 指向实例对象
    this.age = uage; // this 指向实例对象
}
var that;
Star.prototype.sing = function () {
    console.log('I can sing')
    that = this; // this指向实例对象
}
var ltw = new Star('刘天王', 18);
console.log(that === ltw) // true