原型

prototype

概述:prototype是属于函数的一个空间,它是一个对象.因为构造函数也是函数所以他也具备.而这个prototype属性我们称为显式原型

函数的prototype
function fn(){

}
console.log(fn.prototype);
构造函数的prototype
function Person(){

}
console.log(Person.prototype);
//获取当前的构造函数
console.log(Person.prototype.constructor);
//将函数存储在原型上
Person.prototype.sayHello = ()=>{
    console.log(this);
}
//新建对象
var person = new Person()
var person1 = new Person()
console.log(person == person1);//false
//person.sayHello ===>   Person.prototype.sayHello
//对于prototype上存储的内容 通过实例对象.属性名访问
console.log(person.sayHello == person1.sayHello);//true
///对于prototype上存储的内容 通过实例对象.属性名访问
console.log(person.constructor);

  • 从上可得构造函数的prototype是一个对象，第二个里面有个属性 constructor指向当前的构造函数。

  • 实例对象访问对应的prototype上的内容可以通过实例对象.属性名访问

  • 一般将对应的函数存储在对应prototype上（这个函数只会声明一次）。将函数存储在原型，将属性放在构造函数里面。

  • 在prototype里面声明的函数的this指向当前的调用的实例对象

__proto__

概述：

__proto__称为隐式原型，它是属于对象的一个空间，每个对象都存在这个空间，那么对应的实例对象也是一个对象，所以它也有这个空间。这个空间指向对应的构造函数的prototype。

var obj = new Object()
//每个对象都存在的一个空间 它指向对应的构造函数的prototype
console.log(obj.__proto__);
//对象的__proto__指向对应的构造函数的prototype
console.log(obj.__proto__ == Object.prototype);
function Person(){

}
var person = new Person()
console.log(person.__proto__ == Person.prototype);
// Person.prototype.sayHello = ()=>{

// }
person.__proto__.sayHello = ()=>{
    console.log('hello');
}
person.sayHello()

__proto__的指向问题

__proto__指向对应的构造函数的prototype

构造函数也是一个对象 那么它的__proto__指向谁 指向对应的父类的构造函数的prototype

Object的__proto__指向null

原型链

概述：

对象在__proto__上找属性的链式结构被称为原型链。

从上面的指向问题来看 对象在原型上找属性的过程为

  • 先找自己的__proto__ （对应的构造函数的prototype），

  • 再找对应的自身构造函数的原型的__proto__ 找到父类构造函数的原型 ，再找对应的父类的原型的__proto__，直到找到object为止

  • Object的原型的__proto__(null)上还找不到返回undefined

Object.prototype.hello = '你好'
class Person{
    constructor(){
        this.name = '张三'
    }
}
Person.prototype.sex = '女'
Person.prototype.username = 'rose'
//对象赋值 有就重新赋值 没有就添加属性赋值
Person.hi = '你好吗'
var person = new Person()
person.age = '109'
class Son extends Person{
    constructor(){
        super()
        this.age = '李四'
    }
}
Son.prototype.sex = '男'
//实例化对象
var son = new Son()
console.log(son.age);//李四
console.log(son.name);//张三
console.log(son.username);//rose
console.log(son.sex);//男
console.log(son.hello);//你好 
console.log(son.hi);//undefined

总结

  • 构造函数的原型prototype

  • 实例对象的原型__proto__

  • 实例对象的__proto__指向构造函数的prototype

  • 原型链通过对应的对象的__proto__去找对应的属性 直到找到Object为止

  • 原型一般上面写函数，可以保证函数只声明一次。对应的属性写在构造函数内。

  • 原型上的方法/属性。通过实例对象.属性名直接访问（平常通过对象去点的方法都称为原型方法）

  • 在对应的原型上的函数里面的this指向当前调用的实例对象

面向对象的三大特性

封装 （函数的抽取 属性的抽取）

继承 （子类继承父类）

多态 （重写 子类重写父类方法）

继承

概述：

子类继承父类的属性和方法（非私有的属性和方法 非静态的方法）

继承的实现

使用extends关键词实现继承（es6新增 类的继承）
// es6新增类的继承 extends关键词实现
class Person{
    constructor(){
        this.name = 'jack'
    }
}
class Son extends Person{
    constructor(age){
        super()
        this.age = age
    }
}
var son = new Son(18)
console.log(`son`, son);
原型链继承 （覆盖之前原型上的所有方法 显示的时候不会显示继承来的属性 （在原型上重复出现一样的属性））

  • 核心 在子类的原型上创建父类的对象

function Person(){
    this.name = 'jack'
}
function Son(age){
    this.age = age
}
Son.prototype.say = ()=>{
    console.log(`你好`);
}
//原型继承
// 将要继承的类放在继承的子类的原型上
//原型链会覆盖原本原型上的私有的方法及属性
Son.prototype = new Person()
var son = new Son(18)
console.log(`son`, son);
console.log(son.name);
// son.say()
对象冒充 （会显示继承的属性 不能继承原型上的方法）

  • 核心 在子类中调用父类的构造函数 更改this指向

function Person(){
    this.name = 'jack'
}
function Son(age){
    //改this指向 执行父类的构造函数
    Person.call(this)
    this.age = age
}
var son = new Son(18)
console.log(`son`, son);

组合继承 （使用原型链继承和对象冒充结合）

// 组合继承 原型链继承加对象冒充
function Person(){
    this.name = 'jack'
}
Person.prototype.say = ()=>{
    console.log(`hello`);
}
function Son(age){
    //改this指向 执行父类的构造函数
    Person.call(this)
    this.age = age
}
//原型链继承
Son.prototype = new Person()
var son = new Son(18)
console.log(`son`, son);
son.say()

 

原文地址：http://www.cnblogs.com/tch001/p/16829806.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性