美文网首页
构造函数、prototype、class语法糖

构造函数、prototype、class语法糖

作者: 小道小姐姐 | 来源:发表于2020-04-16 11:14 被阅读0次

构造函数模式

function Person(name) {
  this.name = name
}
const p = new Person('vivi')
console.log(p.constructor === Person) // true
console.log(p instanceof Person) // true

构造函数的两个特征:
在函数体内使用了this表示生成的对象实例
在调用构造函数生成对象时需要使用关键字new
使用构造函数模式创建Person新实例包括一下几个过程:

  • 创建一个新对象
  • 将构造函数的作用域赋给新对象(this指针指向该新对象)
  • 执行构造函数中的代码
  • 返回新对象
    构造函数模式比工厂模式优越的地方在于:通过构造函数模式创建的实例会被标识为一种特定的类型,使用instanceof可以获取。
    构造函数的问题:构造函数中的每个方法都需要在实例上重新实现一次。

原型模式

每个函数都有一个prototype属性,这个属性指向一个对象的引用,当该函数作为构造函数时,新创建的对象会继承原型对象上的属性和方法。
每个函数的 prototype 属性都有一个constructor属性,constructor指向该函数。
自此建立起对象和构造函数的prototype之间的关系,例如:

function Person() {
}
Person.prototype.name = 'vivi'
Person.prototype.sayName = function() {
  console.log(this.name)
}
const p1 = new Person() 
const p2 = new Person() 

可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。当在实例中添加了一个与原型对象属性重名的属性,则会在该实例中创建该属性,屏蔽原型中的那个属性。

p1.name = 'vivi2'
console.log(p1.name) // vivi2
console.log(p2.name) // vivi
console.log(Person.prototype.name) // vivi

原型模式的缺点: 省略了为构造函数初始化参数这一环节,所有实例对象共用所有属性,对于引用类型的属性来说,会产生一下问题:

function Person() {}
Person.prototype.friends = ["a", "b", "c"];
var p1 = new Person();
var p2 = new Person();
p2.friends.push("d");
console.log(p1.friends) // ["a", "b", "c", "d"];

更改p2实例上的friends会导致p1的friends属性发生修改

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

function Person() {
  this.friends = ["a", "b", "c"];
}
Person.prototype.sayName = function() {
  console.log(this.name)
}
var p1 = new Person()
var p2 = new Person()
p2.friends.push("d")
console.log(p1.friends)  // ["a", "b", "c"]
console.log(p2.friends)  // ["a", "b", "c", "d"]

class语法糖

class Person {
  private name
  constructor(n) {
      this.name = n
  }
  public printName() {
    console.log(this.name)
  }
}
const p = Person('abc')

常用的一些确定实例类型的方法:

function Person() {}
Person.prototype.name = "vivi";
Person.prototype.sayName = function() {
  console.log(this.name);
};
var p1 = new Person();
p1.name = "vovo";
console.log(Object.keys(p1)); // ["name"]
console.log(p1.hasOwnProperty("name")); // true
console.log("sayName" in p1); // true

isPrototypeOf: 判断实例对象的[[Prototype]]是否指向某个原型对象
Person.prototype.isPrototypeOf(person1)
Object.getPrototypeOf(): 获取某个实例对象的prototype
Object.getPrototypeOf(person1)
hasOwnProperty: 检测某个属性是存在于实例中,还是存在于原型对象中
person1.hasOwnProperty("name")
in 操作符:无论是实例还是原型对象
for...in... 遍历所有可以枚举的属性,无论实例还是原型,屏蔽原型中不可枚举的属性同样会返回,因为根据规定,由开发人员定义的属性都是可以枚举的。(IE8及其更在除外)
Object.keys()返回所有实例对象属性

相关文章

  • 构造函数、prototype、class语法糖

    构造函数模式 构造函数的两个特征:在函数体内使用了this表示生成的对象实例在调用构造函数生成对象时需要使用关键字...

  • ES6 中 class 与构造函数的关系

    ES6 中 class 与构造函数的关系class 为 构造函数的语法糖,即 class 的本质是 构造函数。c...

  • 33.3、class与对象

    class class是function函数的语法糖,class里的constructor相当构造函数,const...

  • 构造函数与类(class)

    类其实就是构造函数的语法糖 , 构造函数 构造函数有一个prototype属性指向自身的原型对象, 构造函数的实例...

  • javascript中的class

    ES5 定义构造函数 通过构造函数加属性,通过原型加方法: ES6 Class语法 class 实际上是语法糖,编...

  • JS原型的面试考点

    class与普通构造函数的区别 class实际上是函数,是语法糖 class在语法上更贴近面向对象的写法。 cla...

  • 2019-06-18 JS 中继承的写法

    使用 prototype 如何继承 使用 class 语法糖如何继承 ``` class Human{ ...

  • class-基本语法(es6)

    js构造函数 Class 语法 语法糖 这种语法糖形式,看起来和实际原理不一样的东西,我个人不太赞同形式上强行模仿...

  • ES6之class

    class基本语法: 1.实质: ​ class只是一个语法糖,类的所有方法都定义在类的prototype...

  • ES6之Class

    基本写法 ES6的class语法基本上就是基于以前ES5构造函数的包装函数,也可以叫做语法糖,所有的功能都能用ES...

网友评论

      本文标题:构造函数、prototype、class语法糖

      本文链接:https://www.haomeiwen.com/subject/ejlcmhtx.html