javascript中面向对象中对象,属性,原型链和一些扩展知识总结
来源:互联网 发布:淘宝演出服 编辑:程序博客网 时间:2024/05/22 16:05
面向对象和面向对象编程
面向对象
就是找个工具,帮我完成一项工作,对象就像一个工具一样,每个工具都可以帮我们实现某个功能,比如汽车可以实现运输,我们只需要学会如何去开动汽车,而不需要知道汽车是如何实现开动的。面向对象的好处:我们所有的项目都是团队作战。通过对象实现任务分离。用对象的某一部分实现一项功能,可以实现团队作战。对象实质上就是一个包含多个工具的工具包,用对象来实现对功能的分类管理。
比如一个字符串对象,有toString,substring,subStr,indexOf,lastIndexOf等函数,用来实现不同的功能。
在对象中可以包含属性,方法,通过点语法来访问对象的属性和方法。
面向对象编程
相当于组装一辆汽车。汽车是一个对象,我们需要让汽车有移动,刹车等功能。我们先要定义这个对象,就是构造函数。然后给汽车添加轮胎,发动机等,就相当于添加属性,我们让汽车跑起来,刹车,就相当于添加方法。而一个刹车系统,相当于对象中的一个模块。我们通过模块化来管理整个对象。这就是面向对象编程。而在我们给别人使用这个对象的时候,只需要让别人实例化这个对象,然后就可以访问对象中的属性和对象中的方法了。
对象的几种不同表现形式
var person = {"name":"tom","age":"10"}此处用json实现一个person对象,json对象是对象的一种字面量表示形式
扩展知识:
json对象和json字符串之间的转换:
json对象和json协议之间的区别:
② 用构造函数实现的对象
function Person (name,age) { this.name = name; this.age = age;}var person = new Person('Tom',10); // 实例化对象console.log(person.name); // 此处我们通过点语法来访问对象的属性console.log(person.age);
function Person (name,age) { this.name = name; this.age = age;}Person.prototype = { say:function() { console.log(this.name + ' is saying'); }}var person = new Person('Tom',10);person.say(); // Tom is saying扩展知识:通常,我们都用此种方法来实例化对象,为了节省内存,我们把对象的方法都放在原型里面。为什么呢? 在我们通过new实例化对象的时候,在内存中,会自动拷贝构造函数中的所有属性和方法,用来给实例对象赋值,而不管我们实例化多少次,原型里面的属性和方法只生成一次,所以会节省内存。我们在实例化new的时候,系统做了如下几件事情:
a.在内存中创建了一个空的对象,就像是这样 var p = {};
b.拷贝对象中的属性和方法到空对象中。
c.自动生成一个__proto__属性指向类的原型。
有关c我们可以通过如下来验证。
console.log(person.__proto__ === Person.prototype); // true另外,由此引出两个方法 hasOwnProperty() 和 isPrototypeOf()方法
hasOwnProperty:用来判断某个方法或者属性是否属于该对象,备注:只会去寻找对象构造函数或者json对象里面的属性和方法,还用person举例:
// 用三个if来 测试 hasOwnPropertyif(person.hasOwnProperty('name')){ console.log('name exsit'); // 输出 name exsit}if(person.hasOwnProperty('say')){ console.log('say exsit'); // 不输出}if(Person.prototype.hasOwnProperty('say')){ console.log('say exsit'); // 输出 say exsit}hasOwnProperty 此方法不会检查该对象的原型链,被检查的属性和方法必须是对象本身的一个成员。
isPrototypeOf:它是基类对象Object的一个方法:Object.prototype.isPrototypeOf()。
// 先创建4个构造函数function A() {}function B() {}function C() {}function D() {}B.prototype = new A(); // 把B的原型指向A实例化后的对象C.prototype = new B(); // 把C的原型指向B实例化后的对象D.prototype = new C(); // 把D的原型指向C实例化后的对象// 下面开始来测试var d = new D();if (B.prototype.isPrototypeOf(d)) { console.log('haha'); // 输出 haha}从这里可以看出 isPrototypeOf 和 instanceof 的区别,我们开始详细的说下:
instanceof : mdn 上的api详解:
简要的说:instanceof运算符可以用来判断某个构造函数的prototype属性所指向的對象是否存在于另外一个要检测对象的原型链上。
isPrototypeOf() 方法测试一个对象是否存在于另一个对象的原型链上。
function A() {}function B() {}function C() {}function D() {}B.prototype = new A(); // 把B的原型指向A实例化后的对象C.prototype = new B(); // 把C的原型指向B实例化后的对象D.prototype = new C(); // 把D的原型指向C实例化后的对象var d = new D();var c = new C();var b = new B();var a = new A();console.log(A.prototype.isPrototypeOf(d)); // true 这里A是处于顶层,表示 A.prototype处于d的原型链上console.log(B.prototype.isPrototypeOf(d)); // trueconsole.log(C.prototype.isPrototypeOf(d)); // trueconsole.log(D.prototype.isPrototypeOf(d)); // trueconsole.log(d instanceof C); // trueconsole.log(d instanceof B); // trueconsole.log(d instanceof A); // trueobject instanceof AFunction 检测的是AFunction.prototype是否在object的原型链中,而不是检测AFunction自身。
语法:object instanceof constructor
isPrototypeOf 方法允许你检查一个对象是否存在于另一个对象的原型链上。
语法:prototype.isPrototypeOf(object)
属性进阶
万物皆属性
function Test(){ this.name = 'test'; this.test = function() { console.log('test'); }}
万物皆变量
var str = 'javascript';var json = {"name":"javascript"}var fn = function() {}扩展知识:函数声明和函数表达式的区别 函数声明会被提升,函数表达式不会被提升,请看下面代码:
function fn() {}var func = function(){};上面的代码实际解析的顺序是这样的:
var func;function fn(){};func = function(){};有关提升的问题,请参考我之前的博文:http://blog.csdn.net/tyro_java/article/details/51131812
属性分类
function Car(type,price) { this.type = type; // 公有属性 this.price = price; var private = 1; // private 是私有属性,外界或者原型里都无法访问,只在构造函数内部能访问 this.run = function() { // 对象方法 console.log('run'); }}Car.prototype = { color:'black',// 原型属性 drive:function() { // 原型方法 console.log('drive'); }, test:function() { console.log(private); }}Car.Weight = 1000; // 公有静态属性,只能通过构造函数来访问,首字母一般大写Car.Fly = function(){ // 类方法 ,只能通过构造函数来访问,首字母一般大写 console.log('car can\'t fly');};// 调用测试var c = new Car('small',10000);console.log(c.run()); // runconsole.log(c.color); // blackconsole.log(Car.prototype.color); // blackconsole.log(c.drive()); // driveconsole.log(Car.Weight); // 1000console.log(Car.Fly()); // car can't flyget,set取值器和设置器,用于对某一属性进行包装,用于取值和设置,js原生自带的两种。因为这个比较复杂我找到了一篇api文档,详细说明了这个,还有 Object.defineProperty() 方法的介绍。
对象实例进阶
function Classroom(id,num,teacher) { this.id = id; this.num = num; this.teacher = teacher;}Classroom.prototype = { property:{ blackbord:"only one", chalk:"110pieces" }, other:'hehe'}var cr = new Classroom(3,2,'Tom');cr.property.blackbord = 'has two'; // 修改引用类型的property属性cr.other = 'crhehe'; // 修改值类型的other属性var cr2 = new Classroom(1,2,'Jack');console.log(cr2.property.blackbord); // has two ,这里其它实例受到影响了console.log(cr2.other); // hehe, 这里其它实例不受影响。每个实例对象都有两个隐藏的属性一个是__proto__,一个是constructor。实例的__proto__属性来自它的构造函数,实例的constructor来自它的构造函数的原型里,下面用浏览器的 repl 环境下测试来验证这一说法,截图验证:
原型链进阶
原型
1.创建一个空的对象
2.拷贝构造函数中的属性和方法放到空对象里
3.自动生成一个__proto__属性指向类的原型
原型对象的特性
1.不管实例化多少次,原型对象只生成一次。
2.原型对象中的属性和方法可以被所有实例访问。
3.原型对象中引用类型的属性是共享的,值类型的属性是各自拥有的。
(在我之前的博文中有提到: http://blog.csdn.net/tyro_java/article/details/50990135 ,看实践二和实践三)
4.对象实例化后实际上生成了两个对象,一个是构造函数对象,一个是原型对象。
原型链
内置对象的原型链
str.__proto__ === String.prototype 为true ,表示实例的__proto__指向类的原型
str.constructor === String 和 String.prototype.constructor === String 都为true 表示constructor指向类的构造函数
属性和方法的搜索机制
阶段性总结一下:js通过__proto__ 这个链条将构造函数和原型以及一层一层的原型直到最终的null联系起来,这就是所谓的原型链。
console.log(Object.constructor === Function); // true console.log(Object.__proto__ === Function.prototype); // true②不止是Object,在js中所有的内置对象都是Function的一个实例,如下所示:
console.log(String.constructor === Function); // true console.log(String.__proto__ === Function.prototype); // true console.log(Array.constructor === Function); // true console.log(Array.__proto__ === Function.prototype); // true console.log(Image.constructor === Function); // true console.log(Image.__proto__ === Function.prototype); // true // ... and so on console.log(Number.__proto__ === Function.prototype); // true console.log(Boolean.__proto__ === Function.prototype); // true console.log(String.__proto__ === Function.prototype); // true console.log(Object.__proto__ === Function.prototype); // true console.log(Function.__proto__ === Function.prototype); // true console.log(Array.__proto__ === Function.prototype); // true console.log(RegExp.__proto__ === Function.prototype); // true console.log(Error.__proto__ === Function.prototype); // true console.log(Date.__proto__ === Function.prototype); // true console.log(Image.__proto__ === Function.prototype); // true③ 而内置对象的实例,则各自指向各自的原型,如下所示:
var str = new String('hello'); var arr = new Array(1,2,3); var img = new Image(); console.log(str.__proto__ === String.prototype); // true; console.log(arr.__proto__ === Array.prototype); // true; console.log(img.__proto__ === Image.prototype); // true;④ 将随便挑一个比如String对象把它单独拿出来看,会有这么一条关系链,如下:
var str = new String('hello');console.log(str.__proto__ === String.prototype); // trueconsole.log(String.prototype.__proto__ === Object.prototype); // trueconsole.log(String.__proto__ === Function.prototype); // trueconsole.log(Function.prototype.__proto__ === Object.prototype); // trueconsole.log(Object.prototype.__proto__ === null); // true
自定义对象的原型链
function A() {};var a = new A();console.log(a.__proto__ === A.prototype); // trueconsole.log(A.constructor === Function); // trueconsole.log(A.__proto__ === Function.prototype); // trueconsole.log(Function.constructor === Function); // trueconsole.log(Function.__proto__ === Function.prototype); // trueconsole.log(Function.prototype.__proto__ === Object.prototype); // trueconsole.log(A.prototype.__proto__ === Object.prototype); // trueconsole.log(Object.prototype.__proto__ === null); // true
- javascript中面向对象中对象,属性,原型链和一些扩展知识总结
- JavaScript中面向对象与原型
- javascript中Object类原型对象的属性和方法
- Javascript中对象的原型和对象的原型对象
- 18--26 面向对象程序设计20(属性是否在对象(和原型对象)中)
- javascript中面向对象之原型链解析
- JavaScript原型对象、原型属性、原型链
- Javascript原型,原型链,面向对象
- JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链
- JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链
- JavaScript中函数声明,函数提升,对象属性和原型属性等问题
- Javascript 面向对象原型
- JavaScript面向对象-原型
- javascript 对象原型,原型链,属性枚举
- javascript中原型对象和实例对象及ECMA5新方法
- 面向对象中属性和方法差异
- 20-JavaScript-面向对象-类(原型对象) 和 对象(实例)
- javascript面向对象(七)原型另外的作用--扩充对象的属性和方法
- Java对xml文件进行读写的方法
- TCP/IP详解学习笔记(8)-DNS域名系统
- django进阶12 使用sql
- 用计数器计算1至100的和
- 两数相乘
- javascript中面向对象中对象,属性,原型链和一些扩展知识总结
- oracle中CAST函数使用简介
- no match for ‘operator=’ 等号两端 不匹配
- C语言strcasecmp
- Android二维码
- Mac App新建空项目
- MVVM 介绍
- adb指令
- 使用文件描述符存取打开文件与直接使用文件名相比有何优点?