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
  • 相关阅读:
    【python之路39】Python 正则表达式
    【html、CSS、javascript-4】新特征之增强表单
    node调试工具--node-inspector安装
    node多版本管理--nvmw
    transform的影响
    HTML5 input事件检测输入框变化[转载]
    mysql5.7.16安装 初始密码获取及密码重置
    undefined 与void 0
    html 自定义标签使用实现方法
    图片轮播滚动
  • 原文地址:https://www.cnblogs.com/enych/p/9116820.html
Copyright © 2011-2022 走看看