zoukankan      html  css  js  c++  java
  • js prototype 原型

      //https://xxxgitone.github.io/2017/06/10/JavaScript%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F/  出处
            function Person() {
    
            }
            Person.prototype.name = 'jiang';   //为对象 添加属性和方法
            var person1 = new Person();
            var person2 = new Person();
            console.log(person1.name) //jiang
            console.log(person2.name) // jiang
    
            // console.log(Object.getPrototypeOf(person1)); //输出指定对象原型
            // console.log(Person.prototype);  //输出原型
    
    
            //function Person() {
            //}
            //var person1 = new Person();
            //console.log(person1.proto === Person.prototype) // true    对象的proto属性 指向函数原型
            //person1 instanceof Person // true     instanceof操作符处理对象和函数之间的关系
    
    
            //Person.prototype.isPrototypeOf(person1) // true      指向调用此方法的对象 返回true   调用通过原型添加的属性或方法
            //Person.prototype.isPrototypeOf(person2) // true
    
            //Object.getPrototypeOf(person1) === Person.prototype // true   // 获取对象原型
    
            //function Person() {
            //}
            //Person.prototype.constructor === Person // true   //这个属性其实就是将原型对象指向关联的构造函数
    
            //function Person() {
            //}
            //var person1 = new Person()
            //person1.constructor === Person  // true    //那岂不是实例person1也有.constructor属性,其实没有,通过原型链在原型Person.prtototype上面找到的
    
    
            function Person() {
            }
            // 原型属性
            Person.prototype.name = 'Jiang';
            var person1 = new Person()
            // 实例属性
            person1.name = 'J';
            console.log(person1.name) // J    //如果在实例属性上没有找到的话,就会在实例的原型上去找,如果原型上还没有,就继续到原型的原型上去找,直到尽头 Object.prototype
    
            function Person() {
            }
            // 原型属性
            Person.prototype.name = 'Jiang';
            var person1 = new Person()
            console.log(person1.name) // Jiang   //上面代码中person1实例并没有name属性,但仍然可以输出值,就是在原型上找到的
    
            function Person() {
            }
            var person1 = new Person()
            // 实例属性
            person1.name = 'j';
            person1.hasOwnProperty('name')  // true   //使用方法hasOwnProperty,属性只有存在于实例中才会返回true
    
            function Person() {
            }
            Person.prototype.age = '100';
            var person1 = new Person()
            person1.name = 'j';
    
            'name' in person1 // true
            'age' in person1  // true   //前面提到hasOwnProperty方法可用于检测属性是否是实例属性,in则会遍历所有属性,不管是实例上的,还是原型上的
    
            //in操作符有两种使用方式,单独使用和在for - in循环中使用, 先上基础代码
            //fon-in, 会遍历所有能够通过对象访问的、可枚举的(enumerated)属性,不管是实例上,还是原型上
            for (var prop in person1) {
                console.log(prop)  // name age
            }
    
            //Object.keys() 此方法可以获取对象的所有可枚举的属性的名字
            var keys = Object.keys(person1)
            console.log(keys) // ["name"]
    
            var keys = Object.keys(Person.prototype)
            console.log(keys) // ["age"]
    
            //原型对象Person.prototype的原型就是Object.prototype
       <!--
    为了理解原型链系统;我们要将javascript对象分为对象和函数两大类;
    1.对象有__proto__属性; 函数有prototype属性;
    {
        创建空对象时,实际上我们是用Object函数来生成对象的
        var o = {};         //有1个_pro属性
        var o = Object();   //有1个_pro属性
        o.__proto__ === Object.prototype; //true
        var p =  o.prototype; //未定义
        var p1 = o.__proto__;  //谷歌调试 包含13属性
        
        使用函数来创建自定义的对象时
        function MyObj() { }
        var t  = typeof MyObj;  // 检测对象的类型为 "function"
        var mo = new MyObj();    // 用函数创建对象 //该有1个_pro属性
        var t = MyObj.prototype;  //谷歌调试  包含2个属性constructor和__proto__;
        var t1 = MyObj.__proto__;  // 谷歌调试 只有 ƒ anonymous()
    
        一般函数默认的prototype是一个对象;它有两个属性constructor和__proto__;
        其中constructor属性指向这个函数自身,
        __proto__属性指向Object.prototype;
        Object函数的prototype属性里没有__proto__属性
    
    }
        -->
          var y = function MyObj() { }   //谷歌调试鼠标放在对象上,只有 ƒ MyObj()
            y.fn = y.prototype = { 
                end:function(){}
            }; //赋值后y.prototype 包含一个 __proto__
            y.prototype = { 
                axd:function(){}
            };
            y.prototype["abcd"] =[];

     //增加特殊符号属性

            y.prototype[":"] =['1'];

    //写法

    构造函数模式

    function Person(name, job) {
      this.name = name
      this.job = job
      this.sayName = function() {
        console.log(this.name)
      }
    }
    var person1 = new Person(‘Jiang’, ‘student’)
    var person2 = new Person(‘X’, ‘Doctor’)

    原型模式

    function Person() {
    }
    Person.prototype.name = ‘Jiang’
    Person.prototype.job = ‘student’
    Person.prototype.sayName = function() {
      console.log(this.name)
    }
    var person1 = new Person()

    原型 写法2

    function Person() {
    }
    Person.prototype = {
      name: ‘jiang’,
      job: ‘student’,
      sayName: function() {
        console.log(this.name)
      }
    }
    var person1 = new Person()
    使用这种方式,完全重写了默认的Person.prototype对象,因此 .constructor也不会存在这里


    更改原型

    
    
        var SmartNode = function (option) {
            this._init(option);
        }
        var t = SmartNode.prototype;  //谷歌调试  包含2个属性constructor和__proto__;  constructor 指向函数自身
        SmartNode.prototype = {
            _init:function (A){
                alert(A);
           this.r=A.r||10; }, drawDashLine:
    function (B){} } var t1 = SmartNode.prototype; //谷歌调试 包含3个属性,drawDashLine 和_init 和__proto__; constructor找不到了 //prototype 原型 SmartNode.prototype={ AA:function(){} }; var t2 = SmartNode.prototype; //谷歌 调试 包含2个属性, 一个是AA指向函数,和__proto__ 指向对象. var smartNode = new SmartNode("123456789");

     new 之后的对象 包括

    1. r: 10
    2. __proto__:
      1. drawDashLine: ƒ (B)
      2. _init: ƒ (A)
      3. __proto__: Object
  • 相关阅读:
    Android 开发 深入理解Handler、Looper、Messagequeue 转载
    Android 开发 Handler的基本使用
    Java 学习 注解
    Android 开发 AlarmManager 定时器
    Android 开发 框架系列 百度语音合成
    Android 开发 框架系列 Google的ORM框架 Room
    Android 开发 VectorDrawable 矢量图 (三)矢量图动画
    Android 开发 VectorDrawable 矢量图 (二)了解矢量图属性与绘制
    Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图
    Android 开发 知晓各种id信息 获取线程ID、activityID、内核ID
  • 原文地址:https://www.cnblogs.com/enych/p/9116820.html
Copyright © 2011-2022 走看看