最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JS从0开始(十)原型、原型链

    正文概述 掘金(我会接网线)   2020-12-11   488

    一. 原型

    1.构造函数的属性 原型对象:prototype

    <script>
    function Handphone(){
    
    }
    console.log(Handphone.prototype); /{constructor : f}
    
    /原型prototype 其实就是function对象的一个属性
    /打印出来看一下,其实它也是对象
    </script>
    

    1.prototype属于 构造函数 的属性
    2.所有被同一个构造函数构造出来的对象都可以继承原型prototype上的属性和方法

    1.2 this上面已有的属性不会往原型上面找

    this上面已有的属性不会往原型上面找:

    JS从0开始(十)原型、原型链

    1.3 写死的属性和方法放到原型里面去

    当我们需要参数传值的时候一般写在this中,需要写死的东西放到原型里面去

    往往属性都是要传参的,而方法基本上都是不变的,所以一般方法都放到原型里面去: JS从0开始(十)原型、原型链

    2. 构造器 constructor

    打印 构造函数的原型 时出现constructor : 构造器 JS从0开始(十)原型、原型链 1 constructor属于构造函数的prototype中,指向的是构造函数本身。
    2 constructor可以被更改

     function A() { }
            function Car(name, age) {
                this.name = name;
                this.age = age;
            }
            Car.prototype.constructor = A;
            console.log(Car.prototype); /输出constructor: ƒ A()
    

    3. 对象原型__proto__

    1.__proto__是在实例化对象时生成的一个属性,存放于this中。
    2.__proto__属于实例化对象
    3.__proto__是每个实例化对象的原型prototype的容器,通过__proto__访问prototype简而言之:__proto__里面存储了prototype

    当构造函数被new的时候产生了一个 this{} 对象,这个this其实不是空对象,里边默认有个__proto__ , __proto__里面默认装上了实例化对象以后的原型 prototype: JS从0开始(十)原型、原型链

    这样就证明了 原型一定是属于实例化对象的,而不属于构造函数

    本节课知识 及相关案例

    1.

    <script>
     function Car(){}
       var car = new Car();
        Car.prototype.name = "Benz"
       console.log(car.name);
         Car.prototype.name = "Mazda"
       console.log(car.name);
    </script>
    
    

    输出Benz、Mazda

    2.

     <script>
            function Car() { }
            Car.prototype.name = "Benz"
            var car = new Car();
    
           Car.prototype = {
               name:'Mazda'
           }
           
            console.log(car.name);
        </script>
    

    输出 Benz :

    JS从0开始(十)原型、原型链 1.被实例化时:prototype被存到__proto__属性中
    2.constructor指向的是构造函数本身, 因为构造函数变化了,所以此时constructor也会变化,里面保存的name为Mazda

    同时:

            function Car() { }
            Car.prototype.name = "Benz"
            var car = new Car();
            Car.prototype.name = "mmm"
            console.log(car.name);   /输出mmm
    

    这种情况是给实例化以后的 prototype.name 属性赋值

    3. 用window 实现闭包

     <script>
          function test() {
              var a = 1;
              function add(){
                  a++;
                  console.log(a);
              }
              window.abb = add; /将函数存到全局的abb变量里面
          }
        test();
        abb();
        abb();
        abb();
        </script>
    

    输出2 3 4 ,将函数 存到全局里面

    实战

    写一个插件 任意传两个数字,调用插件内部方法可进行加减乘除功能


    起源地下载网 » JS从0开始(十)原型、原型链

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元