js原型链

入行前端已经很久了,今天又重新翻了一遍js高程,发现很多东西理解的不够透彻。借鉴阮一峰的博客,重温一遍js的原型链
//js的继承机制它并没有子类和父类的概念,也没有类和实例的区分,全靠一种很奇特的原型链
//prototype chain模式来实现继承
//js的设计思想必须从它的诞生说起
//1994年 netscape发布了navigator浏览器但是仅能用来浏览不具备于访问者交互的能力
//比如登录必须要给服务端去做判断如果没有填写服务器就会返回错误要求用户重新填写,这很浪费时间和服务器的资源
//因此js就被开发出来以运用于解决网页互动这一需求
//JS受到了当时面向对象程序的设计影响所以数据类型都是对象
//className *object = new ClassName(param)
//Foo foo = new Foo();
//构造函数模式的
var cat1 = {};//创建一个空对象
    cat1.name = "大毛";//按照原型对象的属性赋值
    cat1.color = "黄色";
var cat2 = {};
    cat2.name = "二毛";
    cat2.color = "黑色";
function Cat(name,colro){
    return {
        name:name,
        color:color
    }
}
var cat1 = Cat("大毛","黄色")
var cat2 = Cat("二毛","黑色")
//无法反应是同一个对象的实例,
//所谓的构造函数就是一个普通函数,但是内部使用了this变量,对构造函数使用new运算符就能生成
//实例,并且this变量会绑定在实例对象上
function Cat(name,color){
    this.name = name
    this.color = color
}
var cat1 = new Cat("d","s")
var cat2 = new Cat("first","second")
console.log(cat1.name)
console.log(cat1.color)
//cat1和cat2会自动包含一个constructor属性,指向他们的构造函数
//cat1.consturctor == Cat true
//instanceof 验证原型对象与实例对象之间的关系
//cat1 instanceof Cat true
function Cat(name,color){
    this.name = name;
    this.color = color;
    this.type = "猫科动物";
    this.eat = function(){
        alert("吃老鼠")
    }
}
//弊端占用内存每次生成的一个实列都要重新分配内存
function Cat(name,color){
    this.name = name;
    this.color = color;
}
Cat.prototype.type  = '猫科动物'
Cat.prototype.eat = function(){
    alert("吃老鼠")
}
//这个时候只想的内存地址为同一个
cat1.eat == cat2.eat
alert(Cat.prototype.isPrototypeOf(cat1)) //true
alert(Cat.prototype.isPrototypeOf(cat2))//ture
alert("name" in cat1);//true
alert("type" in cat1);//true
//用来判断某一个属性到底是本地属性还是继承prototype对象的属性
hasOwnProperty()
//属性 in Cat1 判断实例对象上的属性不管是不是本地属性
原文地址:https://www.cnblogs.com/peng793238465/p/14011929.html