ES6构造函数前言构造函数 ES6中构造函数的写法构造函数之原型对象 prototype 构造函数通过原型分配的函数

前言

ES6中class语法就是ES6中构造语法的另一种写法，一种更高级的写法，class语法的底层还是ES6中的构造函数，只是把构造函数进行了一次封装而已。ES6出现的目的为了让我们的让对象原型的写法更加清晰、更像面向对象编程让JavaScript更加的符合通用编程规范，即大部分语言对于类和实例的写法。

构造函数

ES6中构造函数的写法

function Star(name,age) {
    this.name = name;
    this.age = age;
    this.sing = function (){
        console.log("唱歌")
    }
}

let ldh = new Star('刘德华',18);
console.log(ldh.age);
ldh.sing();

构造函数之原型对象

prototype 构造函数通过原型分配的函数使所有对象共享。

javascript 规定，每一个构造函数都有一个prototype属性指向一个对象。prototype是一个对象，这个对象的所有属性和方法都会被构造函数拥有。我们可以把那些不变的方法直接定义在prototype对象上，这样所有对象的数列就可以共享这些方法。

原型prototype 是个对象我们也称prototype为原型对象。

作用共享方法。


function Star(name,age) {
    this.name = name;
    this.age = age;
}

Star.prototype.sing = function (){
    console.log("唱歌")
}

对象原型 `proto`

大多数浏览器的ES5实现之中,每一个对象都有__proto__属性，指向对应的构造函数的prototype属性。Class 作为构造函数的语法糖，同时有prototype属性和__proto__属性，因此同时存在两条继承链。

__proto__对象原型的意义就在于为对象的查找机制提供一个向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype。

function Star(name,age) {
    this.name = name;
    this.age = age;
    this.sing = function (){
        console.log("唱歌")
    }
}

let ldh = new Star('刘德华',18);
console.log(ldh.__proto__ === Star.prototype); // true

对象原型__proto__和构造函数prototype原型对象里面都有一个属性constructor属性, constructor我们称为构造函数,因为它指回构造函数本身。 constructor主要用于记录该对象引用于哪个构造函数它可以让原型对象重新指向原来的构造函数。

function Star(name,age) {
    this.name = name;
    this.age = age;
    this.sing = function (){
        console.log("唱歌")
    }
}

let ldh = new Star('刘德华',18);
console.log(ldh.__proto__.constructor);
console.log(Star.prototype.constructor);

javascript的成员查找机(规则)

1. 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。

2. 如果没有就查找它的原型(也就是__proto__指向的prototype原型对象)。

3. 如果还没有就查找原型对象的原型( Object的原型对象)。

4. 依此类推一直找到object为止 (null).


function Star(name,age) {
    this.name = name;
    this.age = age;
}

Star.prototype.sing = function (){
    console.log("唱歌")
}

var ldh = new Star('无',13)

console.log(ldh.__proto__);
console.log(ldh.__proto__.constructor);
console.log(Star.prototype.__proto__);
console.log(Star.prototype.__proto__.constructor);
console.log(Star.prototype.__proto__.__proto__);

call方法的作用

作用： 1.调用函数 2.可以改变这个函数的this指向。

function fn(x){
    this.x = x;
    console.log(this);
    console.log(this.x);
}

let obj = {
    name: 'andy'
}

fn.call(obj,1);

类的本质

1. class本质还是function.

2.类的所有方法都定义在类的prototype属性上。

3.类创建的实例，里面也有__proto__指向类的prototype原型对象。

4.所以ES6的类它的绝大部分功能，ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更加面向对象编程的语法而已。

5.所以ES6的类其实就是语法糖。

6.语法糖:语法糖就是一种便捷写法. 简单理解,有两种方法可以实现同样的功能,但是-种写法更加清晰、方便那么这个方法就是语法糖。

ES6构造函数

前言