原型

作者: BJ呀呀呀 | 来源:发表于2021-04-28 19:11 被阅读0次

1.什么是原型?

是每个一函数自带的一个属性(prototype),它的值是一个对象

2 它的作用?

可以让同一个构造函数创建的所有对象共享属性和方法.
也就是说, 你可以不在构造函数中定义对象的属性和方法,
而是可以直接将这些信息添加到原型对象中。

 function show() {
        }
        console.log(show.prototype);

 //构造函数+new
        function Person(name) {
            this.name = name;//字符串,值类型
            this.run = function () {
                console.log(`我是${this.name},我爱跑步!`);
            }
        }

        var p = new Person("刘德华")
        p.run()

        var p1 = new Person("刘德华")
        p1.run()

        console.log(p == p1);//fasle
        console.log(p.name);
        console.log(p.name==p1.name); //true
        console.log(p.run==p1.run);   //false,因为在new的时候,
                                      //构造函数内部又创建一次函数
function Person(name) {
            this.name = name;
            // this.run = function () {
            //     console.log(`我是${this.name},我爱跑步!`);
            // }
        }
        Person.prototype.run = function () {
            console.log(`我是${this.name},我爱跑步!`);
        }
        Person.prototype["show"] = function () {
        }
        var p1 = new Person("刘德华");
        var p2 = new Person("刘德华");
        console.log(p1 == p2); // fasle //2个不同的对象,在栈开辟了2个不同的空间
        console.log(p1.name == p2.name);//true //字符串比较,相等
        console.log(p1.run == p2.run); //true,p1.run和p2.run是同一个地址

原型的优缺点

往原型上添加的属性和方法,都被共享了
属性,初始化的时候不能指定

属性写到构造函数内部,方法原型里面

//属性构造函数化,方法原型化
 function Person(name, age) {
            this.name = name;
            this.age = age;
            this.family = ["芭比", '妈咪']
        }
        //属性
        // Person.prototype.name = "西门坤";
        // Person.prototype.age = 21;

        //方法
        Person.prototype.add = function (name) {
            this.family.push(name);
        }

        Person.prototype.show = function () {
            console.log(this.family);
        }

        var p1 = new Person("西门坤", "21");
        p1.add("潘金莲");


        var p2 = new Person("东门坤", "22");
        console.log(p1);
        console.log(p2);

        p1.show()

        p2.show()

当构造函数的属性与原型的属性,同时存在的时候,构造函数内部的属性优先

        function Person() {
            this.name = "项某某";
        }

        Person.prototype.name = "刘德华";
        var p = new Person();
        console.log(p.name);//项某某

写法1

function Person() {

        }
Person.prototype.run = function () { }
Person.prototype.show = function () { }
Person.prototype.eat = function () { }

//既然 Person.prototype 它是一个对象,就可以往对象里添加
 console.log(Person.prototype);

写法2

 Person.prototype = {
            constructor: Person,//构造器强行指回到构造函数
            run() { },
            show() { },
            eat() { }
        }
        Person.prototype.myname = "刘德华";

        console.log(Person.prototype);

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • JavaScript 原型和原型链

    原型 在 JavaScript 中,我们所称的原型有两个使用语境: 原型关系 原型属性 原型关系指对象的原型对象,...

  • JavaScript 原型和原型链

    原型 在 JavaScript 中,我们所称的原型有两个使用语境: 原型关系 原型属性 原型关系指对象的原型对象,...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • 关于原型原型链的理解

    什么是原型? 什么是原型链? 为什么需要原型,和原型链?

  • js的原型对象&原型链&js的继承

    原型对象 & 原型链 原型对象分2种:显式原型和隐式原型。 显式原型就是我们常用的prototype属性,是函数的...

  • 4.4 JavaScript

    4.4.1. 原型链 4.4.1.1. 显式原型和隐式原型   JavaScript的原型分为显式原型(expli...

  • 原型、原型链

    理解JavaScript原型 彻底理解JavaScript原型 原型 原型是一个对象,所有对象都可以成为原型,其...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • 2-6 原型和原型链 - 5个原型规则

    2-6 原型和原型链 - 5个原型规则 5条原型规则,原型规则是学习原型链的基础。 第一、所有引用类型(数组、函数...

网友评论

      本文标题:原型

      本文链接:https://www.haomeiwen.com/subject/tqyprltx.html