js从零开始复习---构造函数

103 阅读1分钟

一、构造函数:

1、new关键字来调用 2、首字母大写

二、

  • 普通写法:
const a = {name: 'zhangsan', age: 28}

const b = {name: 'lisi', age: 55}

const c ....
  • 构造函数写法:
function Person(name, age){
	this.name = name;
    this.age = age;
    this.animate = function(){
    	return this.name + '会吃饭';
    }
}

const a = new Person('zhagnsan', 28);
const b = new Person('lisi', 55);

总结:当new一个新实例,就会开辟一个新内存空间,this关键字就会指向这个内存空间。

三、构造函数的本质

以上代码等同于

function Person(name, age){
	var this = {};
    this.name = name;
	this.age = age;
    this.animate = function(){
        return this.name + '会吃饭'
    }
    return this;
}

四、如果直接调用函数,那么,this对象指向window,并且,不会默认返回任何对象

var person1 = Person('michael');

person1; 				// undefined

window.name;            // michael

所以,为了防止忘记new调用构造函数,可以加一个判断

function Person(name, age){
	if(!(this instanceof Person)){
    	return new Person(name, age)
    }
    this.name = name;
    this.age = age;
    this.say = function() {
    	return this.name + '会吃饭';
    }
}

var person1 = Person('michael');

console.log(person1.say());					//michael会吃饭

五、类与构造函数的关系

构造函数写法:

function Person(name, age){
	if(!(this instanceof Person)){
    	return new Person(name, age);
    }
	this.name = name;
    this.age = age;
}
Person.prototype.say = fuction(){
  	return this.name + this.age
}
var obj = new Person('lisa'28);
console.log(obj.say());

类的写法:

class Person{
	constructor(name, age){              //constructor是一个构造方法,用来接收参数
    	this.name = name;
        this.age = age;
    }
    
    say(){   							 //这是一个类的方法,注意千万不要加上function
    	return this.name + this.age;
    }
}
var obj = new Person('lisa'28);
console.log(obj.say());

总结:通过class定义的类 和通过构造函数定义的类 二者本质相同。并且在js执行时,会将第二种转会为第一种执行。所以 class的写法实质就是构造函数