原型及原型链

prototype

所有的函数都拥有一个属性，这个属性称为prototype，它是一个对象空间（里面可以存放对应的数据），也被称为显示原型。

function fn(){
	
}
//打印这个属性对应的空间
console.log(fn.prototype)

constructor构造器他指向对应的构建的函数（指向他自己）

根据上面的我们可以看到每个函数都有这样的一个属性,那么作为构造函数他是不是也有对应prototype属性

function Person(){
	
}
console.log(Person.prototype) //作为一个属性存在 属性是唯一 也就是当前他只有一个prototype 属性的声明只会声明一次

• 作为一个属性存在 属性是唯一 也就是当前他只有一个prototype 属性的声明只会声明一次
• 因为当前这个属性 他对应的是一个对象空间，所以他里面的内容可以被更改和设置的
• 那么我们就可以在这个里面存放一些内容

function Person(){

}
Person.prototype.username = 'jack' //往这个对象空间存放一个属性 叫username
Person.prototype.age = 18 //往这个对象空间存放一个属性 叫age
Person.prototype.sayHello = ()=>{}
console.log(Person.prototype)

通过实例对象 来访问对应的prototype里面的属性

//取出里面数据 因为构造函数是用于构建对象的 所以我们这个prototype的里面数据 是应该给实例对象去获取
var person = new Person()
//访问原型中数据（构造函数的prototype里面的属性）实例对象.属性名
console.log(person.username);

• 一般把方法放在原型里面
• 把属性放在构造函数里面

function Son(){
    this.name = 'jack'
    this.age = 18
}
Son.prototype.print = function(){
    console.log(this); //指向当前的实例对象
    console.log(this.name); //指向当前的实例对象
}
new Son().print()

proto

每个对象都有一个属性叫做__proto__，他也是一个内存空间，他指向对应的构造函数的prototype，称为隐式原型。

var obj = {}
console.log(obj.__proto__)

这个对象空间里面也可以存储对应的数据，这个__proto__，他是每个对象都有的，那么实例对象也是个对象，它同样也有。

function Person(){

}
let person = new Person()
person.__proto__.username = 'jack'
console.log(person.__proto__)
//通过打印的结果 我们可以看到对应的里面的结果类似于我们的构造的prototype
console.log(Person.prototype == person.__proto__) //ture

• 实例对象__proto__ 是指向对应构造函数的prototype
• 在实际使用中一般不会用__proto__ ，是通过他来访问对应的prototype

从上可得对应的实例对象的__proto__ 是指向构造函数的prototype，那么请问对应的函数是不是也是一个对象，他同样具备__proto__ ,那么他的__proto__ 指向谁，最终又指向谁?

原型链

原型链其实就对应的寻找原型（__proto__）的过程组成的一个链式结构，称为原型链。

Object.prototype.hello = 'hello'
class Person{
    constructor(){
        this.username = 'jack'
    }
}
Person.prototype.age = 18
class Son extends Person{
    constructor(){
        super()
    }
}
Son.prototype.say = ()=>{}
let son = new Son()
//son的__proto__指向构造函数的原型 对应的Son这个构造函数的__proto__又指向了对应的父类的原型
//对应的父类的构造的函数原型的__proto__指向了对应的Object的构造函数的原型 
//那么对应的Object的构造函原型的__proto__ 指向null 这个寻找的过程就称为原型链
console.log(son.__proto__.__proto__.__proto__.__proto__);
//那么接下来 我们又知道了对应的对象去访问原型的中属性 直接通过点的形式
//又明白了作用域链 是一层一层向上找变量作用域
//所以我们又可以通过原型链来找对应的属性 原型中的属性
console.log(son.age); //18
console.log(son.hello); //hello
console.log(son.abc); //undefined

继承

继承属于面向对象的三大特性之一，面向对象的三大特性。

• 封装：抽取内容封装
• 继承：子类继承父类
• 多态：重写 重载
  继承为子类继承父类的内容，子类可以拥有父类所有的非私有的属性及方法。

继承的实现

extends 关键词（class的继承）*（es6的）

class Person{
	constructor(){
		this.username = 'jack'
	}
}
class Son extends Person{
	constructor(){
		 super()
	}
}
console.log(new Son().username) //jack

原型继承（prototype赋值给需要继承的对象）

function Person(){
	this.password = '123'
}
function Son(){

}
Son.prototype = new Person()
console.log(new Son().password )//123

组合继承（原型+call该this指向）

//组合继承
function Person() {
    this.password = '123'
}
function Son() {
    Person.call(this) //将person里面的this改成Son里面的this
}
Son.prototype = new Person()
console.log(new Son().password) //123

对象冒充

//对象冒充
function Person() {
    this.password = '123'
}

function Son() {
    Person.call(this) //将person里面的this改成Son里面的this
}
let son = new Son()
console.log(son.password);

多态

一个东西的多种形态的体现。子类是父类多态的体现（基于继承的）

重写 子类重写父类的方法

function Person(){
	this.sayHello = ()=>{
		console.log('你好')
	}
}
function Son(){
	this.sayHello = ()=>{
		console.log('hello') //子类重写父类方法
	}
}
Son.prototype = new Person()
let son = new Son()
son.sayHello() //hello

es6的模块化

import 导入
export 导出

es6的写法

<script type='module'></script>

一个内容如果需导入，必须先导出

第一种写法

export导出

//对象
const obj = {
    username:"jack",
    password:'123'
}
//函数
const sayHello = ()=>{
    console.log('hello');
}
//值
const message = '这个是一个信息'
//数组
const arr = [1,2,3,4]

//变量的接的数据 需要导出必须用{}
export {
    obj,
    sayHello,
    message,
    arr
}

import导入

import {
    obj,
    sayHello,
    message,
    arr
} from './a.js'  //解构
sayHello()

console.log(`obj`, obj);
console.log(`message`, message);
console.log(`arr`, arr);

第二种写法

export导出

export const obj = {
        username:"jack",
        password:'123'
    }
export const sayHello = ()=>{
    console.log('hello');
}
export const arr = [1,2,3,4]
export const message = '这个是一个信息'

import导入

//* 表示所有的 as取别名(随便取)
import * as hello from './a.js' 
hello.sayHello()

console.log(`obj`, hello.obj);
console.log(`message`, hello.message);
console.log(`arr`, hello.arr);

第三种写法

export导出

export default {
    obj,
    sayHello,
    message,
    arr
}

import导入

import a from './a.js' 
a.sayHello()

console.log(`obj`, a.obj);
console.log(`message`, a.message);
console.log(`arr`, a.arr);

export 导出内容

• export const 对应的变量
• export default 对应的变量
• export {}

import 导入内容

• import 变量名 from 文件地址 （所有的话 * 必须取别名 as）

标签：__,console,log,Son,Person,原型,prototype
来源： https://www.cnblogs.com/-lsg10026244/p/16596658.html