前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于 JavaScript 原型和继承的思考

关于 JavaScript 原型和继承的思考

作者头像
西南_张家辉
发布2021-02-02 09:46:22
3500
发布2021-02-02 09:46:22
举报
文章被收录于专栏:张家辉的树屋

闭包和原型

prototype

  • 工厂函数
代码语言:javascript
复制
function user(name){
    var newUser = {};
    newUser.name = name;
    return newUser;
}
复制代码
  • 构造函数
代码语言:javascript
复制
//使用new的是 构造函数
function User(name,age,gender){
    this.name = name ; 
    this.age = age ;
    this.gender = gender ;
}

var whh = new User('whh',16,'male');
//生成对象的过程叫做实例化
console.log('whh:',whh)
复制代码
  • 理解 prototype 和 _proto_
代码语言:javascript
复制
function User(name,age,gender){
    this.name = name ; 
    this.age = age ;
    this.gender = gender ;
    this.eat = function(){
      console.log('miao')  
    } ;
    this.greeting = function(){
        console.log('yo! my name is '+this.name)
    }
}

//每次需要实例化,每个新的new 都是不同的浪费空间

复制代码
  • 使用prototype 方法
代码语言:javascript
复制
function A(){}

A.prototype.name = 'lala';

var a = new A();
var b = new A();

console.log(a._proto_ **= b._proto_)
// true

//a.constructor() **= A(){}
复制代码

原生对象的原型

代码语言:javascript
复制
var aa = {};
var bb = new Object();
console.log(a.constructor **= b.constructor)//true

//纯洁的 object
var pure = Object.create({
    
});
console.log('pure:',pure)

//测试数组
var a = [];
var a = new Array();
console.log('a',a)

多级继承链怎么实现

代码语言:javascript
复制
function Animal(color,weight){
    this.color = color;
    this.weight = weight;
    // this.eat = function(){
    //     console.log('mia mia mia...');
    // }

    // this.sleep = function(){
    //     console.log('hu lu lu...');
    // }
}

Animal.prototype.eat = function(){
    console.log('mia mia mia...');
}

Animal.prototype.sleep = function(){
    console.log('hu lu lu...');
}

function Manmal(color,weight){
    //绑定Animal的 显性属性的继承方式 
    Animal.call(this,color,weight);
}

function Person(color,weight) {
    //绑定Animal的 本地属性 
    Manmal.call(this,color,weight);
}

//继承能力
var a = new Animal();
var b = new Animal();

console.log('a.eat **= b.eat:',a.eat **= b.eat);
var lsd = new Person();

//使用继承 manmal --> animal
Manmal.prototype = Object.create(Animal.prototype); 
Manmal.prototype.constructor =  Manmal;
//将继承的constructor 再重新指回 Manmal constructor应该为父辈,这里指向了爷爷
Manmal.prototype.suckle = function(){
    console.log('biu biu biu...');
}

var m =new Manmal('red',80);
console.log('m:',m);
// m.__proto__ // --> Object Animal
// m.constructor //  -->func Animal
//改进以后 Manmal 为 m 的生产厂家

//修改Person
Person.prototype = Object.create(Manmal.prototype);
Person.prototype.constructor = Manmal;
Person.prototype.lie = function(){
    console.log('你不帅!');
}

var lsd = new Person('hei',12);
console.log('lsd:',lsd);
复制代码

总结

几个原型链之间的关系:

image
image
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • prototype
  • 原生对象的原型
  • 多级继承链怎么实现
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档