构造函数更改或新增原型链

构造函数:

  1. 构造函数返回默认原始值时(实例),构造函数通过prototype设置该构造函数的原型链,如下:

    function Person (name) {
    	this.name = name
    }
    Person.prototype.getName = function () {
    	return `你好!${this.name}`
    }
    const person = new Person('张三')
    person.getName() // 你好!张三
    
  2. 如果构造函数返回指定对象时,则不能通过prototype设置原型链,如下:

    注意:如果构造函数返回非对象时,则会忽略该返回值,构造函数继续会返回原始值(默认的实例)

    function Person (name) {
    	this.name = name
    	return {
    		nameMsg: `你好!${this.name}`
    	}
    }
    // 下面代码不会报错,但是getName方法无法添加到原型链上
    Person.prototype.getName = function () {
    	return `我是${this.name}`
    }
    const person = new Person('张三')
    console.log(person.nameMsg) // 你好!张三
    person.getName() // 会报错:person.getName is not a function,因为getName无非正常添加到原型链上
    
  3. 类是构造函数的语法糖,3.1的例子可以进行如下改写:

    class Person {
    	constructor(name) {
    		this.name = name
    	}
    	getName () {
    		return `你好!${this.name}`
    	}
    }
    // 由于类是构造函数的语法糖,所以你仍然可以通过prototype来设置原型链的方法,
    // 如下重新设置的getName方法会覆盖类声明getName
    // Person.prototype.getName = function () {
    //  return `我是${this.name}`;
    // };
    const person = new Person ("张三")
    console.log(person.name) // 张三
    console.log(person.getName()) // 你好!张三
    

你可能感兴趣的:(JS,javascript)