//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 之后的对象 包括