今日学习JS进阶之创建对象(二)

70 阅读2分钟

1.使用构造函数来创建一个 Person 类

题目要求

使用构造函数来创建一个 Person 类, 需要完成以下要求:

  • 构造函数依次接受参数 nameagesex
  • 生成(new)的实例对象带有 name、 age、 sex 的属性,值来自传入的参数
  • 生成(new)的实例对象带有 sayHello 的方法,调用 sayHello 方法将在控制台上(console.log)输出实例本身的的 name 属性。

如下所示:

var person = new Person('Sugar', 2, 'unknown');
console.log(person instanceof Person);  // true
console.log(person.name);  // Sugar
console.log(person.age); // 2
console.log(person.sex); // unknown
function Person(name,age,sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHello = function () {
        console.log(this.name);
    }
}
var person = new Person('guo',19,'famale');
console.log(person instanceof Person);
console.log(person.name);
console.log(person.age);
console.log(person.sex);
person.sayHello();

  • 可以证明person是Person的一个实例 但是对于sayHello 功能相同的函数 重复声明浪费空间

2.prototype(原型)

  • 所有引用类型都有一个_proto_(隐式原型)属性,属性值是一个普通的对象
  • 所有函数都有一个prototype(原型)属性,属性值是一个普通的对象
  • 所有引用类型的_proto_属性指向它构造函数的prototype
var a = [1,2,3];
console.log(a.__proto__ === Array.prototype); //true
Bottle.prototype.isPrototypeOf(bottle1) //检验实例bottle1是否挂了Bottle的prototype

使用 Prototype 来创建一个 Person 类

题目要求

使用 Prototype 来创建一个 Person 类,需要完成以下要求:

  • 在构造函数 Person 的 prototype(原型) 上增加下面的共享属性:

    • 在原型上增加属性 name 值为 'Jonny'
    • 在原型上增加属性 friends 值为 ['Cover', 'Kevin']
  • 在构造函数 Person 的原型上增加共享方法 sayHello

如下所示:

function Person(name) {

}
Person.prototype.name = 'Jonny';
Person.prototype.friends = ['Cover', 'Kevin'];
Person.prototype.sayHello = function () {

}

var person1 = new Person('Sugar');
var person2 = new Person('Cream');
console.log(person1.friends);
console.log(person2.friends);
console.log(person1.sayHello === person2.sayHello);

3.判断下列哪段代码会有共享问题

image.png 有共享问题通常情况是不同变量指向相同的引用类型的数据,一旦该数据的属性被修改了,则指向该数据的变量的值都会受到影响。

  • B 选项,变量 a 和 b 都指向同一个数组,第三行往数组push了一项,数组变为 [1, 2, 3, 4],变量 ab 都会受影响。
  • D 选项也是一样的,变量 a b 指向同一个对象,对象属性值被改了,ab 都会受影响。
  • 选项 A 不是引用类型,没有影响。
  • 选项 C 第三行 a 重新指向另外一个对象了,对 b 没有影响。

返回练习

4.构造函数结合原型

  • 实例的属性(构造函数中中的属性)会覆盖构造函数原型上的属性
  • 属性的判断
    • in 'name' in bottle1 //属性不管在实例里面(构造函数里面)还是原型上都是true
    • hasOwnProperty bottle1 hasOwnProperty('name') //只有在实例里面(构造函数里面)是true
function Person(name,friends) {
    this.name = name;
    this.friends = friends;
}
Person.prototype.sayHello = function() {

}
var person1 = new Person('Sugar',['milk','fruit']);
var person2 = new Person('Cream',['Bread','egg']);
console.log(person1.name);
console.log(person2.name);
console.log(person1.friends);
console.log(person2.friends);
console.log(person1.sayHello === person2.sayHello);