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
原文地址:https://www.cnblogs.com/enych/p/9116820.html