首页 > 其他分享 >21. 原型对象和原型链

21. 原型对象和原型链

时间:2022-12-10 09:45:25浏览次数:25  
标签:__ 构造函数 21 对象 原型 prototype 属性

arguments:

arguments.length为函数实参个数,arguments.callee引用函数自身

函数体内的内置对象,作用域在函数体内

作用:

1. 打印实参伪数组(智能访问元素和length属性,其他的API不能使用)

 function fun(){
   console.log(arguments);
     for(let i=0; i<arguments.length;i++){
         console.log(arguments[i]);
       }
    }

  fun(1,"heihei");

打印结果:

image-20221206141147145

2. 设计不定参函数

   function fun() {
        for (let i = 0; i < arguments.length; i++) {
            if (typeof arguments[i] == "number") {
                console.log("执行数字操作");
            } else if (typeof arguments[i] == "string") {
                console.log("执行字符串操作");
            } else if (typeof arguments[i] == "boolean") {
                console.log("执行布尔操作");
            }
        }
    }

    fun("heihei", 1, true);

打印结果:

image-20221206141905824

arguments.callee:代表当前函数对象本身

let fun = function () {
        console.log(arguments.callee);
    }

    fun();

打印结果:

image-20221206142019303

案例:计算10的阶乘

function adfasfd(n) {
        let c;

        if (n == 1) {
            c = 1;
        } else {
            c = arguments.callee(n - 1) * n;
        }

        return c;
    }

    console.log(adfasfd(10));
    
    打印结果:3628800

原型对象 (函数对象(特指构造函数)的一个属性,prototype)

它保存着所有实例对象共享的属性和方法

所有的行为都是整个类族共享的,不应该属于某一个实例对象

也就是说,没有必要在每个实例创建时,都为这些函数开辟空间

当一个实例对象修改了同名的原型对象属性时,是不能实现功能的,它等价于为自己的实例对象添加了一个新属性

constructor 构造函数

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

对象原型__proto__

image-20221207211146927

image-20221207212413232

凭什么子类对象可以访问到父类的属性和父类的方法,以及子类的属性和子类的方法?

子类对象可以直接访问new出来空间的属性,

子类对象通过__proto__,可以访问子类原型对象上的属性和方法,

通过子类的原型对象prototype指向了父类的实例对象,所有可以访问父类实例对象new出来的属性,

通过父类实例对象的__proto__,访问父类的原型对象的属性和方法

特点:向上找

原型链

是什么?作用?

每一个对象,都有一个原型对象与之关联,这个原型对象它也是一个普通对象,这个普通对象也有自己的原型对象,这样层层递进,就形成了一个链条,这个链条就是原型链.通过原型链可以实现JS的继承,把父类的原型对象赋值给子类的原型,这样子类实例就可以访问父类原型上的方法了。

function Fn() {}// Fn为构造函数
var f1 = new Fn();//f1是Fn构造函数创建出来的对象
构造函数的prototype属性值就是对象原型。(Fn.prototype就是对象的原型)
构造函数的prototype属性值的类型就是对象 typeof Fn.prototype===object.
对象原型中的constructor属性指向构造函数 (Fn.prototype.constructor===Fn)
对象的__proto__属性值就是对象的原型。(f1.__proto__就是对象原型)
Fn.prototype===f1.__proto__ 其实它们两个就是同一个对象---对象的原型。
所有Fn.prototype.__proto__===Object.prototype
typeof Object.prototype ===object。
Object.prototype.__proto__===null。

img

为什么实例对象可以访问到所有的属性和方法?

实例对象可以直接访问自己new出空间的属性,

每个实例对象都有一个__proto__的属性,

它指向类的原型对象,所以可以访问原型对象中的属性和方法

案例:为官方类添加原型对象


//最大数
Array.prototype.max = function(){
        let maxNum = this[0];

        this.forEach((x)=>{
            if(maxNum < x){
                maxNum = x;
            }
        });

        return maxNum;
    }

    let arr = [1,2,3,4,5,6,7,8,9];

    let x = arr.max();

    console.log(x);

apply和call

apply和call:都是函数对象的方法

作用:

1.修改this指向

  • ​ 函数对象.apply(被修改的this指向,[原函数的参数1,参数2...])

  • ​ 函数对象.call(被修改的this指向,原函数的参数1,参数2...)

2.实现了类和函数的解耦

案例 function Dog(name){ this.name = name; } function Cat(name){ this.name = name; } function eat(food1,food2){ console.log(this.name + ":" + food1 + "," + food2); } let d = new Dog("旺财"); eat.apply(d,["火腿肠","狗粮"]); eat.call(d,"骨头","炒细面"); let c = new Cat("哆啦A梦"); eat.apply(c,["老鼠","铜锣烧"]); eat.call(c,"猫粮","披萨");

面试题:apply,call,bind的异同?

1.都是用来修改函数的this指向

2.apply和call用来修饰有名函数,bind用来修饰匿名函数

3.apply的第二个参数必须是数组,bind和call用逗号分开

4.apply和call会直接调用该方法, 而bind只是产生了一个新的函数对象

标签:__,构造函数,21,对象,原型,prototype,属性
From: https://www.cnblogs.com/qianfanqf/p/16969920.html

相关文章

  • 13. 事件对象的兼容
    事件对象的兼容:每个事件函数天生有一个参数叫event,它是事件对象,如果想修改event的名称,事件函数的第一个参数就是用来修改的<divid="div"></div>varoDiv=document.g......
  • 14. 通过style对象获取和设置行内样式
    style属性的获取和修改在DOM当中,如果想设置样式,有两种形式:className(针对内嵌样式)style(针对行内样式)这篇文章,我们就来讲一下style。需要注意的是:style是一个对象......
  • 9. 内置对象String
    字符串的所有方法,都不会改变原字符串(字符串的不可变性),操作完成后会返回一个新的值。字符串的常见方法如下。查找字符串1、indexOf()/lastIndexOf():获取字符串中指定内容......
  • re_mysql_20221210
    1.约束#约束CREATETABLEtb_user2(idintAUTO_INCREMENTPRIMARYKEYCOMMENT'ID唯一标识',namevarchar(10)NOTNULLUNIQUECOMMENT'姓名',ageintC......
  • java学习补充 对象的内存问题(基于黑马的课进行自学,初学者,不喜勿喷)
    初步学习面向对象JDK8以前,堆内存和方法区相连,创建的字节码文件会储存在方法区中,而JDK8以后,则分为堆内存与元空间不过由于此处只涉及基本的对象内存问题,所以用方法区来记......
  • 面向对象
    Loli.cs1publicclassLoli2{3publicstringname;4publicboolsex;5publicintage;6publicintheight;7publicintwe......
  • JavaScript:变量的作用域,window对象,关键字var/let与function
    为什么要将这些内容放在一起,因为他们都跟初始化有关系,我们慢慢说吧。我们在代码中,都会声明变量、函数和对象,然后由浏览器解释器(下面简称浏览器)执行;我们还说过,变量和对象......
  • 前端开发系列021-基础篇之日期类型和计时器
    title:'前端开发系列021-基础篇之日期类型和计时器'tags:-javaScript系列categories:[]date:2017-06-1808:20:13本文介绍JavaScript语言中的Date日期类型,常......
  • 前端开发系列016-基础篇之Javascript面向对象(五)
    title:'前端开发系列016-基础篇之Javascript面向对象(五)'tags:-javaScript面向对象系列categories:[]date:2017-06-0110:52:16一、严格模式说明在JavaScri......
  • 前端开发系列017-基础篇之Javascript原型对象
    title:'前端开发系列017-基础篇之Javascript原型对象'tags:-javaScript系列categories:[]date:2017-06-1321:05:13引用:javaScript是一门基于原型的语言,它允......