JavaScript面向对象学习对象原型、原型、原型链(二)

发布于:2022-08-09 ⋅ 阅读:(417) ⋅ 点赞:(0)

⭐️⭐️⭐️  作者:船长在船上
???  主页:来访地址船长在船上的博客
???  简介:高级前端开发工程师,专注前端开发,欢迎咨询交流,共同学习

???感谢:如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题,可以关注、支持一下博主,如果三连收藏支持就会更好,在这里博主不胜感激!!!

如有疑问可以留言、评论,看到后会及时回复。  
 

 

目录

 一、对象原型

 二、原型

三、原型constructor

 四、原型链


 一、对象原型

注意事项:

1.方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
2.如果没有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法

        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        Star.prototype.sing = function() {
            console.log('我会唱歌');
        }
        var ldh = new Star('林一', 18);
        var zxy = new Star('林二', 19);
        ldh.sing();
        console.log(ldh); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
        console.log(ldh.__proto__ === Star.prototype);
        

打印结果:

 二、原型

注意事项:

1.一般情况下,公共属性定义到构造函数里面, 公共的方法放到原型对象身上


        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
            // this.sing = function() {
            //     console.log('我会唱歌');

            // }
        }
        Star.prototype.sing = function() {
            console.log('我会唱歌');
        }
        var ldh = new Star('林一', 18);
        var zxy = new Star('林二', 19);
        console.log(ldh.sing === zxy.sing);
        // console.dir(Star);
        ldh.sing();
        zxy.sing();
       

打印结果:

 

 

三、原型constructor

注意事项:

1.很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数

2.如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数

        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
      
        // Star.prototype.sing = function() {
        //     console.log('我会唱歌');
        // };
        // Star.prototype.movie = function() {
        //     console.log('我会演电影');
        // }
        Star.prototype = {
       
            constructor: Star,
            sing: function() {
                console.log('我会唱歌');
            },
            movie: function() {
                console.log('我会演电影');
            }
        }
        var ldh = new Star('林一', 18);
        var zxy = new Star('林二', 19);
        console.log(Star.prototype);
        console.log(ldh.__proto__);
        console.log(Star.prototype.constructor);
        console.log(ldh.__proto__.constructor);

打印结果:

 四、原型链

        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        Star.prototype.sing = function() {
            console.log('我会唱歌');
        }
        var ldh = new Star('林一', 18);
        // 1. 只要是对象就有__proto__ 原型, 指向原型对象
        console.log(Star.prototype);
        console.log(Star.prototype.__proto__ === Object.prototype);
        // 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
        console.log(Object.prototype.__proto__);
        // 3. 我们Object.prototype原型对象里面的__proto__原型  指向为 null

打印结果:

 

  ??? 欢迎来访船长在船上的博客,如有疑问可以留言、评论,看到后会及时回复。  

本文含有隐藏内容,请 开通VIP 后查看