这篇文章主要介绍了关于js中自定义对象的解析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
一、对象1.字面量创建对象var person = { name: "sun", age: 18, work: function () { console.log(this.name + "is working..."); }, address: { home: "大屯里xxx路xxx小区xx单元xxx室", phone: "123456789", }};person.work();console.log(person.address.home);
2.数据描述和存取描述设置var person = { age: 18, address: { home: "大屯里xxx路xxx小区xx单元xxx室", phone: "123456789", }};object.defineproperties(person, { name: { value: "sun", // 该属性的值，可被读取 writable: true, // 表示能否修改属性的值，默认值为true configurable: true, // 表示能否delete该属性并重新定义，直接在对象上定义的属性默认值为true enumerable: true // 表示能否通过for-in枚举，直接在对象上定义的属性默认值为true }, work: { value: function(){ console.log(this.name + "is working..."); }, // 通过object.defineproperty和object.defineproperties定义属性， // 如果没有声明writable、configurable、enumerable，它们的默认值都是false }});person.work();console.log(person.address.home);
3.get和setvar circle = { value: 10, get girth(){ return 2 * 3.14 * this.r }, get area(){ return 3.4 * this.r * this.r },};object.defineproperty(circle, "r", { get : function () { return this.value; }, set : function (val) { console.log("半径被修改了！"); this.value = val; }});circle.r = 100;console.log("girth: " + circle.girth + "area: " + circle.area);
4.数据描述和存取描述检查var circle = { r: 10, // __proto__: null, get area(){ return 3.4 * this.r * this.r },};object.defineproperty(circle, "site", { value: [0, 2.2, 4.1], // enumerable: true, // 是否可配置（读取），不设置为true时，object.keys(circle))和object.values(circle))将获取不到该键值对});console.log("r" in circle); // 检查属性console.log(circle.hasownproperty("r")); // 检查自有的属性console.log(circle.propertyisenumerable("r")); // 检查属性是否是可枚举的// object对象的方法console.log(object.keys(circle));console.log(object.values(circle));console.log(object.getownpropertynames(circle)); // 检查对象自身所有属性console.log(object.getownpropertydescriptor(circle, "r")); // 得到circle对象关于r属性的描述
二、prototype1.prototype释义- 每一次创建函数，解析器都会向函数中添加一个属性:prototype- 如果函数作为普通函数调用prototype，没有任何作用- 当该函数以构造函数的形式调用时，它会有一个隐含的属性__proto__指向其原型对象- 每个实例有各自的__proto__指向原型对象的prototype, 也就是原型对象中的属性和方法被调用函数"共享"- 当类的原型对象prototype指向的内存地址发生改变时，已创建实例的__proto__ !== prototype，也就是不会被覆盖。而新创建的实例仍然是__proto__ === prototyp
function person(name, age) { this.name = name; this.age = age;}// person.prototype.gender = "male";// person.prototype.sayhello = function () {// return this.name + ", " + this.age + "years old."// };person.prototype = { gender: "male", sayhello: function () { return this.name + ", " + this.age + "years old." }};var p1 = new person("孙悟空", 2000);p1.sayhello();console.log(person.prototype);console.log(person.prototype.constructor === person);
2.prototype与__proto__
function person() {}var obj1 = { gender: "male"}; // 创建两个内存地址var obj2 = { age: 200 };person.prototype = obj1;var p1 = new person();console.log(p1.__proto__ === person.prototype);console.log(p1.__proto__.gender);console.log(person.prototype);person.prototype = obj2;var p2 = new person();console.log(p2.__proto__.age);console.log(person.prototype);console.log(p1.__proto__.age); // undefinedconsole.log(p2.__proto__.gender); // undefinedconsole.log(p1.__proto__ === person.prototype); // false，表示当prototype指向的内存地址改变时，已经创建的实例对象的__proto__仍指向原来的内存地址console.log(p2.__proto__ === person.prototype);
function person() {}person.prototype = {name: "xxx", age: 100,};var p1 = new person();console.log(p1.__proto__.name);person.prototype = { price: 998,};var p2 = new person();console.log(p2.__proto__.price);console.log(p1.__proto__.price); // undefinedconsole.log(p2.__proto__.name); // undefiendconsole.log(p1.__proto__ === person.prototype); // false, 原型对象的内存地址引用已发生改变console.log(p1.__proto__.age); // __proto__指向的内存地址被保留console.log(p2.__proto__ === person.prototype); // true
function person() {}person.prototype = { price: 60 };var p1 = new person();person.prototype = { price: 998};var p2 = new person();console.log(p1.__proto__ === person.prototype); // 依然是falseconsole.log(p2.__proto__ === person.prototype); // true
3.prototype之共享性// prototype非常类似python中的静态属性和静态方法。每个实例都可以访问同一块内存空间。function person() {}person.prototype = {price: 60};var p1 = new person();var p2 = new person();console.log(p1.__proto__.price);console.log(p2.__proto__.price);console.log(person.prototype.price);
4.prototype之继承性// 当访问实例对象的一个属性或方法时，它会先在对象自身中查找，如果有则直接使用；如果没有则在原型对象中继续查找，如果有则直接使用function person() {}person.prototype = {price: 60};var p1 = new person();var p2 = new person();console.log(p1.price);console.log(p2.price);console.log(person.prototype.price);
三、类1.类的封装// 字面量方法(工厂方法) -- 直接在var obj = {}内部写代码，缺点是只实例化一次// 构造函数方法 -- 只用构造函数声明this，缺点是可扩展性差，数据重复// 原型方法 -- 只用prototype声明共有的属性和方法，缺点是实例的数据相同，不满足多态
1.混合的构造函数/原型方法// 最广泛的使用方法function person(name, age) { this.name = name; this.age = age;}// prototype写在外面是为了保证其动态增加公共属性和方法person.prototype.sayhello = function () { console.log(this.name + ", " + this.age + " years old."); // 把共有的属性和方法封装到prototype中};var p = new person("孙悟空", 2000);p.sayhello();
// 我把它写给person的属性，让父类也能够访问function person(name, age) { person.group = person.prototype.group = "西天取经组"; person.tostring = person.prototype.tostring = function (){ console.log("person: " + person.group) }; this.name = name; this.age = age; this.sayhello = function () { console.log(this.name + ", " + this.age + "years old.") };}var person = new person("孙悟空", 2000);console.log(person.constructor); // 检查构造器函数console.log(person instanceof person); // 检查是否为其原型类person.sayhello();person.tostring();
2.动态原型方法// 也是常用的方法function person(name, age) { this.name = name; this.age = age; if (typeof person._initialized === "undefined"){ person.prototype.sayhello = function () { console.log(this.name + ", " + this.age + " years old."); }; person._initialized = true; }}var p = new person("孙悟空", 2000);p.sayhello();
3.混合工厂方法// 混合工厂方法 -- 存在与工厂方法类似的问题，不建议使用function person(name, age) { var obj = {}; obj.name = name; obj.age = age; obj.sayhello = function () { console.log(this.name + ", " + this.age + " years old."); }; return obj}var p = new person("孙悟空", 2000);p.sayhello();
4.再探讨类结构function person(name, age) { // 静态属性 person.group = "西天取经四人组，暗合金木水火土"; // 静态方法 person.introduce = function () { console.log("贫僧自东土大唐而来") }; // 实例属性 this.name = name; this.age = age; // 实例方法，应该写在prototype中 this.say = function () { console.log("hello, i'm " + this.name); }; person.prototype.introduce = person.introduce; // 此时person类和其实例都可以使用introduce方法 // 父类使用实例方法 person.example = person.prototype.example = function (self) { self = self || this; console.log(self.name + " " + self.age); }}// 在python中，实例可以访问父类的属性和方法，父类也可以使用实例方法// 在java和js中，实例不能调用父类的静态属性和静态方法，父类不能使用实例方法// 如果想让实例和父类共享一个属性或者方法，就只能放到方法区并创建引用var sun = new person("孙悟空", 2000);person.introduce(); // 父类调用静态方法sun.say();sun.introduce(); // 实例调用静态方法person.example(sun); // 父类调用实例方法sun.example(); // 子类调用实例方法// 可见，prototype是父类和实例的沟通桥梁
2.自定义类function person(name, age) { this.name = name; this.age = age; this.sayhello = function () { console.log(this.name + ", " + this.age + "years old.") };}function new(person) { return function () { var obj = {"__proto__": person.prototype}; // 必须写在这里 person.apply(obj, arguments); // arguments同this一样，是默认自带的关键字，用于存储传入的参数 return obj }}var temp = new(person);var p1 = temp("孙悟空", 2000);var p2 = temp("猪八戒", 1);p1.sayhello();p2.sayhello();
3.类的继承1.拷贝继承字面量对象(实例)var person = { name: "li", age: 16, address: { home: "none", city: "none", }, say: function(){ console.log("hello, guy.") }};var child = {gender:"female",};function extenddeeply (p, c){ var c = c || {}; for (var prop in p) { if (typeof p[prop] === "object") { c[prop] = (p[prop].constructor === array) ? [] : {}; extenddeeply(p[prop], c[prop]); } else { c[prop] = p[prop]; } }}extenddeeply(person, child);console.log(child);child.say();
2.call和apply实现对象继承function person(name, age) { this.name = name; this.age = age; this.address = { home: "none", city: "none", }}person.prototype.say = function () { console.log("hello, guy.")};// 它继承的只是实例对象this，无法继承父类原型prototypfunction child(name, age) { person.call(this, name, age); this.gender = "female";}var child = new child("li", 16);console.log(child);// child.say(); 报错: child.say is not a function.
对象继承的缺点：只继承了实例对象的可访问的属性和方法，没有继承原型
3.原型链继承// 原型链继承function person() {}person.prototype.name = "person";person.prototype.tostring = function () { console.log(this.name);};function child(name, age) { this.age = age; this.name = name;}child.prototype = person.prototype;child.prototype.constructor = child;var child = new child("li", 16);console.log(child.name + " " + child.age);child.tostring();// 其缺点是之继承了原型，没有继承实例
4.create实现类继承function person(name, age) { this.name = name; this.age = age; this.address = { home: "none", city: "none", }}person.prototype.say = function () { console.log("hello, guy.")};function child(p, name, age) { function f() {} f.prototype = new p(name, age); var c = new f(); return c;}child.prototype.constructor = child; // 无法修正var child = new child(person, "li", 16);console.log(child);console.log(child.name);child.say();console.log(child.constructor); // 结果为[function: person]，构造器指向无法修正console.log(child instanceof child); // falseconsole.log(child instanceof person); // true
5.object.create实现类继承 -- 推荐的方式// object.create继承，实现原理和上面的create类似// 1.创建父类function person() {}person.prototype.sayperson = function () { console.log("hello, person.")};// 2.创建子类function child(gender) {this.gender = gender;}// 3.create继承// object.create的第二个参数是属性描述child.prototype = object.create(person.prototype, { name: { value: "li", writable: true, enumerable: true, configurable: true, }, age: { value: 16, writable:true, configurable:true, enumerable:true, },}); // 重写子类prototypechild.prototype.constructor = child; // constructor 修正// 4.在create之后写子类的prototypechild.prototype.saychild = function () { console.log("hello, child.")};var child = new child("female");console.log(child);console.log(child.name + " " + child.age);child.saychild();child.sayperson();
5.组合继承 -- 推荐的方式function person(name, age) { this.name =name; this.age = age;}person.prototype.tostring = function () { console.log(this.name + " " + this.age);};function child(name, age, gender) { person.call(this, name, age); this.gender = gender;}child.prototype = new person(); // new时不传参数，是为了只继承原型，即child.prototype = person.prototype// child.prototype = person.prototype; // 两者等价child.prototype.constructor = child;var child = new child("li", 16, "female");console.log(child);child.tostring();console.log(child instanceof child); // trueconsole.log(child instanceof person); // true
6.继承总结js继承需要继承两部分内容：- 一部分是父类构造函数中的this定义属性和方法，相当于继承初始化的数据- 另一部分是父类的prototype，相当于继承实例方法- 要实现this的继承，可以用call(apply)；要实现prtotype的继承，可以用原型链- 要实现两者的继承，可以用this+prototype的组合方式，object.create本质上也是这种思路
7.prototype、constructor和__proto__在继承中的关系
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
对js中事件模型的解析
如何把js变量值传到php
以上就是js中自定义对象的解析的详细内容。