ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

构造函数和原型

2022-05-12 17:34:43  阅读:194  来源: 互联网

标签:对象 age uname 原型 prototype 构造函数


构造函数和原型

一.构造函数和原型

1、构造函数

1.概述

构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new一起使用,我们可以吧对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

new在执行时会做四件事

  1. 在内存中创建一个新的空对象;

  2. 让this指向这个新的对象;

  3. 执行构造函数里面的代码,给这个新对象添加属性和方法;

  4. 返回这个新对象(所以构造函数里面不需要return)。

创建对象的三种方式:

1.对象字面量

var obj1={};
  1. new Object()

var obj2=new Object();

3.自定义构造函数

function Star(uname,age){
    this.uname=name;
    this.age=age;
    this.sing=function(){
        console.log("我会唱歌啊");
    }
}
var ldh=new Star('刘德华',42);
var zxy=new Star('张学友',46);
ldh.sing();
zxy.sing();
​

下文皆使用这个例子来说明。

2.成员

JavaScript的构造函数中可以添加一些成员,可以在构造函数本身添加,也可以在构造函数内部的this上添加。通过这两种方式添加的成员,就分别为静态成员实例成员

  • 静态成员:在构造函数本身上添加的成员,只能由构造函数本身来访问;

function Star(uname,age){
    this.uname=name;
    this.age=age;
    this.sing=function(){
        console.log("我会唱歌啊");
    }
}
Star.sex="男";//在构造函数本身添加  就是静态成员
console.log(Ster.sex);//只能通过本身来访问
  • 实例成员:在构造函数内部创建的对象成员,只能由实例化的对象来访问。

function Star(uname,age){
    this.uname=name;
    this.age=age;
    this.sing=function(){
        console.log("我会唱歌啊");
    }
}
var ldh=new Star('刘德华',42);
//这里面的 uname  age sing  就是实例成员,都是通过this添加的成员。只能通过实例对象ldh来访问

2.对象原型prototype

构造函数虽然很好用,但是存在浪费内存的问题~

美创造一个都会开辟一个新的空间。

这就来了原型prototype 解决这个问题~

构造函数通过原型分配的函数是所有对象共享的;

JavaScript规定:每一个构造函数都有一个prototype属性,指向另一个对象。注意这个prototype就是一个对象,这个对象的所有属性方法,都会被构造函数拥有。

我们把那些不变的方法直接定义在原型对象上,这样所有的对象的实例就可以共享这些方法,就节约了内存空间。

function Star(uname,age){
    this.uname=name;
    this.age=age;
}
​
Star.prototype.sing=function(){
        console.log("我会唱歌啊");
    }//把sing这个方法定义在原型上
​
var ldh=new Star('刘德华',42);
var zxy=new Star('张学友',46);
ldh.sing();
zxy.sing();
​

3.原型对象 proto

对象都会有一个属性proto指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象proto的存在。

  • proto对象原型和原型对象prototype是等价的

console.log(ldh.__proto__ === Star.prototype)//true
  • proto对象原型的意义就在于为对象的查找机制提供一个路线。但是是一个非标准属性,在实际开发中,不可以使用这个属性,他只是内部指向原型对象prototype。

来张图理解理解~

4. constructor构造函数

对象原型(proto)和原型对象(prototype)都有一个constructor属性,constructor我们称为构造函数,因为它指回构造函数本身。

很多情况下,我们需要用constructor函数指回原来的构造函数。

Star.prototype={
    constructor:Star,//如果不添加这一步,那么就会把原来的对象覆盖,因此不会指向原来的构造函数
    Sing:fnction(){
    console.log("我会唱歌");
},
     Movie:fnction(){
    console.log("我会演电影");
}
}
​
console.log(Star.prototype.constructor);
//指回原来的构造函数

5.三者的关系

 

6.原型链

查找成员是按照这个原型链一层一层找下去,如果没找到,就返回undifined。

成员查找规则

  1. 当访问一个对象的属性时,首先查找这个对象自身有没有这个属性;

  2. 如果没有就查找他的原型也就是proto指向的prototype原型对象;

  3. 如果也没有找到,就查找原型对象的原型(Object的原型对象);

  4. 依此类推直到找到Object为止(null)。

7.扩展内置对象

通过原型对象,对原来的内置对象进行扩展自定义的方法。

例子:添加一个加法方法sum

<script>
        Array.prototype.sum = function () {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum += this[i];
            }
            return sum;
        }
        var arr = [1, 2, 3];
        console.log(arr.sum());
</script>

注意:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype={},只能是Array.prototype.xxx=function(){}的方式。

二、继承

ES6之前不提供extends继承,可以通过构造函数+原型对象模拟实现继承,被称为组合继承。

1.call( )

调用这个函数,并且修改函数运行时的this指向。

fun.call(当前调用函数this的指向对象,参数1,参数2,...)

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

2.借用父构造函数继承属性

例子:

 <script>
        function Father(uname, age) {
            this.uname = name;
            this.age = age;
        }
​
        function Son(uname, age) {
            Father.call(this, uname, age);
        }
        var son = new Son('刘德华', 34);
        console.log(son);//添加了这两个属性
    </script>

2.借用原型对象继承属性

<script>
        function Father(uname, age) {
            this.uname = name;
            this.age = age;
        }
        Father.prototype.money = function () {
            console.log('赚了10000块');
        }
        Son.prototype = new Father();
        //用了对象的形式秀发i了原型对象用constructor指回原来的构造函数
        Son.prototype.constructor = Son;
​
        function Son(uname, age, score) {
            Father.call(this, uname, age);
            this.score = score;
        }
        var son = new Son('刘德华', 34, 100);
        console.log(son);
        console.log(Son.prototype.constructor);
    </script>
​

图片分析过程:

在Father原型对象上添加了money这个方法,当Son要使用这个方法时,创建一个Father实例对象,Son原型对象指向这个实例对象,这个实例对象里面有一个proto对象原型指向Father原型对象,也就相当于继承到了这个方法。

 

 

本文为pink老师视频的笔记,原视频指路:

https://www.bilibili.com/video/BV1f5411t7dq?p=13&spm_id_from=pageDriver

标签:对象,age,uname,原型,prototype,构造函数
来源: https://www.cnblogs.com/xiaohuliya/p/16263364.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有