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