CocosCreator 面试题（二）JavaScript中的prototype的理解

1、原型（prototype）的作用

在JavaScript中，每个函数都有一个特殊的属性叫做"prototype"，它是一个对象。

原型（prototype）在JavaScript中用于实现对象之间的继承和共享属性。当创建一个函数时，JavaScript会自动为该函数创建一个原型对象，并将其赋值给函数的"prototype"属性。

通过原型对象，我们可以给函数添加属性和方法，这些属性和方法将被该函数的所有实例对象所共享。当我们创建一个函数的实例对象时，该实例对象会继承函数的原型对象上的属性和方法。

举个例子，我们创建一个名为"Person"的构造函数，然后向它的原型对象添加一个属性和一个方法：

// 创建构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 向原型对象添加属性和方法
Person.prototype.gender = 'Male';
Person.prototype.greet = function() {
  console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
};

// 创建实例对象
var person1 = new Person('John', 25);
var person2 = new Person('Alice', 30);

// 访问共享的属性和方法
console.log(person1.gender); // 输出: Male
person2.greet(); // 输出: Hello, my name is Alice and I am 30 years old.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在上面的例子中，通过给"Person.prototype"添加属性"gender"和方法"greet"，所有通过"Person"构造函数创建的实例对象都可以访问这些共享的属性和方法。

这样的原型链继承机制可以实现属性和方法的共享，避免在每个实例对象中重复定义相同的属性和方法，从而节省内存并提高代码的效率。

2、函数有prototype属性，函数创建的对象没有prototype属性

// 创建构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 向原型对象添加属性和方法
Person.prototype.gender = 'Male';

// 创建实例对象
var person1 = new Person('John', 25);
 
console.log(person1.prototype.gender); //Uncaught TypeError: Cannot set properties of undefined (setting 'gender')
1
2
3
4
5
6
7
8
9
10
11
12
13

3、如何查看一个对象到底有没有prototype这个属性?

console.log("prototype" in person1) //false
1

4、如何查看一个变量是对象自己扩展的？

hasOwnProperty
1

// 创建构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 向原型对象添加属性和方法
Person.prototype.gender = 'Male';

// 创建实例对象
var person1 = new Person('John', 25);
person1.var1 = "person1自己的变量"

console.log(person1.hasOwnProperty("var1")) //true
console.log(person1.hasOwnProperty("gender")) //false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5、对象__proto__和prototype 有什么区别?

• 对象__proto__属性和函数的protype属性是一样的。
• 对象并没有prototype属性

__proto__ 其实双下划线表示隐藏，不让外界访问到。

函数Person不仅创建了person1，还会创建了person2，这时候如果子person1通过__proto__修改了var1，那么父Person 的var1跟着变化，并且person2的var1也会变化。

但是如果person1直接修改var1，那么Person和person2的var1都不会变化。

// 创建构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 向原型对象添加属性和方法
Person.prototype.gender = 'Male';

// 创建实例对象
var person1 = new Person('John', 25);
 
person1.var1 = "person1自己的变量"

console.log(person1.__proto__ === Person.prototype) // true
console.log(person1.__proto__ == Person.prototype) // true
console.log(person1.prototype == Person.prototype) // false
console.log(person1.__proto__.var1) //Person 进行了扩展
console.log(person1.var1)	//person1 进行了扩展
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

6、函数对象用两次__proto__即可找到Object 对象原型 _prototype属性

var obj1 = new Object()
console.log(obj1.__proto__ == Object.prototype) // true

var obj2 = Object()
console.log(obj2.__proto__ == Object.prototype) // true

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

console.log(Person.prototype.__proto__ == Object.prototype) // true
var person1 = new Person()
console.log(person1.__proto__ == Person.prototype)
console.log(person1.__proto__.__proto__ == obj1.__proto__) // true


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17