对象之原型链浅谈

ygx_brightness

于 2022-07-14 22:14:56 发布

阅读量483

点赞数 1

文章标签： javascript 前端原型模式

本文链接：https://blog.csdn.net/ygx_brightness/article/details/125792270

版权

4.1.对象的原型与原型的原型之间的继承链称作原型链

（1）对象属性的__proto__指向构造函数的prototype

（2）原型链的尽头是Object.prototype,Object.prototype的尽头是null

（3）对象的属性，自己有的继承自己，若没有则沿着原型链逐渐查找继承

4.2.易误区：

4.2.1对象找原型用__proto__,对象没有prototype属性

前言：

这里对原型链做一个简单的介绍，并例举了原型链的一些实例和用法法，都是自己学习的一些笔记，发出来方便大家按需食用，希望对大家有些帮助

1.js中什么是实例，什么叫实例化？

类：动物
实例：猫

2.实例化一个对象，赋值给Cat

//定义一个构造函数：
function Animal(){}
//实例化一个对象：
var Cat =new Animal();

这里Cat就是实例，var Cat =new Animal()的过程为实例化过程

3.原型对象:

定义：存在于构造函数的prototype上，他的属性和方法可以被实例化的对象继承

array方法继承证明：

var arry = []    
arry.length == Array.prototype.length     
console.log(arry.length == Array.prototype.length);                //true  
console.log(arry.__proto__ == Array.prototype);                   //true   
console.log(arry.__proto__.length == Array.prototype.length);    //true

object方法继承证明：

var obj = {}        

console.log(obj.toString == Object.prototype.toString); //true        

console.log(obj.__proto__ == Object.prototype);         //true

console.log(obj.__proto__.toString == Object.prototype.toString)//true

以上可知对象、数组的属性和方法也是从原型链上继承得到的,由此可推测引用数据类型都会继承其构造函数上的属性

4.何为原型链：

4.1.对象的原型与原型的原型之间的继承链称作原型链

console.log(Array.prototype.__proto__.__proto__==Object.__proto__.__proto__.__proto__);//null==null，true

console.log(Array.prototype.__proto__==Object.prototype)//原型链的尽头是Object.prototype 
console.log(obj.__proto__.__proto__==Object.prototype.__proto__);//true   
console.log(Object.__proto__.__proto__.__proto__);//null 尽头 Object.prototype的尽头是null

（1）对象属性的proto指向构造函数的prototype

（2）原型链的尽头是Object.prototype,Object.prototype的尽头是null

（3）对象的属性，自己有的继承自己，若没有则沿着原型链逐渐查找继承

4.2.易误区：

4.2.1对象找原型用proto,对象没有prototype属性

console.log(obj.__proto__.__proto__ == Object.prototype.prototype);//null==undefined

4.2.2道不同，却殊途同归：

var obj = {}, obj2 = {name: "aa"}
console.log(obj.__proto__==obj2.__proto__);//true 道相同
obj.__proto__ = {test1: 2}
console.log(obj.__proto__==obj2.__proto__);//false 道不同
console.log(obj.__proto__.__proto__==obj2.__proto__);//true 殊途同归
console.log(obj.test1);//2         console.log(obj2.test1);//undefined

原本obj和obj2走的是同一条原型链继承道路，因为obj的原型链中一段obj.__proto__ 被重新定义，所以obj的原型链是条新的原型链，与原obj、obj2的原型链不再相等，但它们的尽头依旧是Object.prototype

5.对象原型的使用；

5.1已有的原型链上追加属性(重写)

        var peo1 = {
            name: "姜苏",
            skill: "回山",
            age: 18
        }, peo2 = {
            name: "陈果",
            age: 19
        }
       // 获取属性名长度，方法一:
        Object.defineProperty(Object.prototype, "nameLength", {
            get() {
                var count = 0
                for (var x in this) {
                    count++
                }
                return count;
            }
        })
        console.log(peo1.nameLength);
      //方法二
        Object.prototype.getLength = function () {
            var sum = o;
            for (var x in this) {
                if (x == "getLength") continue; sum++;
            }
            return sum;
        }
      //获取属性名：
        Object.defineProperty(Object.prototype, "Name", {

            get() {
                var arr = []
                for (var x in this) {
                    console.log(x);
                    arr.push(x)
                }
                return arr
            }
        })
        console.log(peo1.Name);
        console.log(peo2.Name);

好处：在原型链上添加，属于这条原型链的对象都可以用，率土之滨，莫非王臣，Object.prototype就是顶层的王，所有人都继承能它的属性，皆为它臣

6.原型使用之提取公有属性、公共方法:

  Cat.prototype.type = "中华田园猫!";
        Cat.prototype.color = "黄白相见";
        Cat.prototype.sayHello = function () {
            console.log("瞄~");
        }
        function Cat(name, age, price) {
            this.type = "中华田园猫!"
            this.color = "黄白相见"
            this.name = name;
            this.age = age; this.price = price;
        }
        var cat1 = new Cat("小黄", 2, 1000), cat2 = new Cat("小可", 1, 2000);
        console.log(cat1);
        console.log(cat2);
        console.log(cat1.sayHello == cat2.sayHello);//true

同一个构造函数实例化出来的对象共用该构造函数上的方法，并且都继承该构造函数的属性

7.重写构造原型链实现继承：

要求：实现单向继承,改原型指向,实现原型链的多项继承,单向绑定

  CatPa.prototype.earscolor = "bule";
        function CatPa(name, color) {
            this.name = name
            this.color = color
        }
        CatFa.prototype = new CatPa;
        CatFa.prototype.eyescolor = "bule";
        function CatFa(name, color) {
            this.name = name
            this.color = color
        }
        CatSon.prototype = new CatFa;
        CatSon.prototype.tailcolor = "black";
        function CatSon(name, color) {
            this.name = name
            this.color = color
        }
        var catpa = new CatPa("小橘", "yellow"), catfa = new CatFa("小黑", "black"), catson = new CatSon("小白", "white")
        console.log(catpa);
        console.log(catfa);
        console.log(catson);
        console.log(`猫son:  耳朵颜色:${catson.earscolor},  瞳孔颜色:${catson.eyescolor},   尾巴颜色:${catson.tailcolor}`);
        console.log(`猫fa:  耳朵颜色:${catfa.earscolor},  瞳孔颜色:${catfa.eyescolor},   尾巴颜色:${catfa.tailcolor}`);
        console.log(`猫pa:  耳朵颜色:${catpa.earscolor},  瞳孔颜色:${catpa.eyescolor},   尾巴颜色:${catpa.tailcolor}`);

通过New父级构造函数,达到子继承父属性,父遗传属性给子，只会继承父原型上有的属性不会继承父本身的属性