Javascript基础

541 阅读2分钟

构造函数

在 Javascript 中我们可以使用构造函数来声明一个类,然后利用new关键词实例化类。在构造函数中,this指向来该构造函数本身。

function Person(name) {
    this.name = name;
}
Person.prototype.move = function() {

}

let person = new Person("Lily")
console.log(person.name) //Lily
person.move()

prototype

prototype 是一个对象,用于让所有的实例共享属性和方法。例如在上面的🌰中,我们在 Person 的prototype中添加了 move 方法,这样可以让所有的 Person 实例都继承这个方法。

__proto__

proto 是各个浏览器厂商实现的非标准 Javascript 属性。它指向构造函数的 prototype 对象.例如

``js
function Person(name) {
    this.name = name;
}
Person.prototype.move = function() {

}

let person = new Person("Lily")
person.__proto__ === Person.prototype //true

constructor对象

每一个构造函数的原型上面都会有 constructor 对象,它指向构造函数本身,用代码来表示就是这样:

function Person{}
Person.prototype.constructor === Person

原型链

function Person{}
Person.prototype = {}
let person = new Person()
person.name

在 Javascript中,如果我们访问对象的某个属性,系统将先会在该对象上找,如果找不到,则会在该对象的__proto__(Person.prototype) 对象上继续找,如果没有会继续往上层找 Person.prototype.__proto__( Person.prototyoe.__proto__ === Object.prototype),我们或许会问,Object.prototype.__proto__ 又是什么呢?其实是 null 。此时如果还没有找到,则会返回undefined,这样就形成一条完整的原型链。

继承

Javascript中最常用的继承方法就是原型链继承了。

function Person() {}
function Student() {
    Person.call(this)
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

//继承多个父类

function SuperClass() {}
function OtherSuperClass() {}
function ChildClass() {
    SuperClass.call(this);
    OtherClass.call(this);
}
ChildClass.prototype = Object.create(SuperClass.prototype)
Object.assign(SuperClass.prototype,OtherSuperClass.prototype)
ChildClass.prototype.constructor = ChildClass;

相信你看完上面关于原型的介绍很快就会明白上面继承的原理: 子类通过将prototype设置为父类的实例来达到既继承并且重写了父类的方法和属性,而又不会影响父类的效果。这里我们利用 Object.create 方法实现实例化,当然也可以使用new关键字。

new关键字

我们通常使用 new 关键字实例化Javascript对象,在 new 的过程中其实发生了如下过程:

function Person() {}
person = new Person();
/**等同于*/
person = new Object();
person.__proto__  = Person.protoype;
Person.call(person)

上面过程可以简单描述为,先创建一个 Object 实例,然后将该实例的 __protot__属性指向Person.prototype ,最后再将 this 指针指向 Person,不是刚好符合我们上面所描述的那样吗?

总结

Javascript 基于原型链的设计让我们使用起来非常方便,但是同时原型链对于 Javascript 初学者来说相对比较难以理解。在平常的工作和学习过程中,我们一定要牢固掌握基础知识,多多积累知识和经验,这样才能从容面对工作中遇到的难题。