4.高级js--(面向对象js)_2
l第一种构造法:new Object
var a = new Object();
a.x = 1, a.y = 2;
l第二种构造法:对象直接量
var b = { x : 1, y : 2 };
l第三种构造法:定义类型
function Point(x, y){
this.x = x;
this.y = y;
}
var p = new Point(1,2);
2.访问对象
l中括号表示法:hero['name']。、l点号表示法:hero.name。l如果访问的属性不存在,会返回undefined。
l方法名后加一对括号:hero.say()。l像访问属性一个访问方法:hero['say']()。
3.删除属性与方法
//创建一个空对象
var hero = {};
//为hero对象增加属性和方法
hero.name = "javascript";
hero.value = "helloworld";
hero.sayName = function(){return "hello " + hero.name;};
//测试
alert(hero.name); //output javascript
alert(hero.sayName()); //output hello javascript
//删除hero对象的name属性
delete hero.name;
//测试
alert(hero.sayName()); //output hello undefined
4.使用this值
//创建一个空对象
var hero = {};
//为hero对象增加属性和方法
hero.name = "javascript";
hero.value = "helloworld";
hero.sayName = function(){return "hello " + this.name;};
//测试
alert(hero.name); //output javascript
alert(hero.sayName()); //output hello javascript
总结:
l这里的this实际上引用的是“这个对象”或“当前对象”。lthis的用法,大部分人的使用问题都比较多。所以不建议过多使用!
5.内建对象
l内建对象大致上可以分为三个组:
l数据封装类对象 —— 包括Object、Array、Boolean、Number和String。这些对象代表着javascript中不同的数据类型,并且都拥有各自不同的typeof返回值,以及undefined和null状态。
l工具类对象 —— 包括Math、Date、RegExp等用于提供遍历的对象。l错误类对象 —— 包括一般性错误对象以及其他各种更特殊的错误类对象。它们可以在某些异常发生时帮助我们纠正程序工作状态。
6.Object对象
lObject是javascript中所有对象的父级对象,这意味着所有对象都继承于Object对象。l创建一个空对象:
var object = {};
var obj = new Object();
7.Array对象
lArray对象用于在单个的变量中存储多个值。l创建一个空Array对象:
var object = {};
var obj = new Array();
例如1://反转字符串示例
//定义一个字符串
var str = "a,b,c,d,e,f,g";
//利用String对象的split()方法,将字符串切割成一个数组
var arr = str.split(",");
//利用Array对象的reverse()方法,将数组中元素的顺序颠倒。
arr = arr.reverse();
//测试打印
alert(arr.toString());
8.String对象
lString对象与基本的字符串类型之间的区别:
var str = "hello";
var obj = new String("world");
alert(typeof str); //typeof string
alert(typeof obj); //typeof object
例如1://判断字符串是否包含指定字符串示例
//定义两个要判断的字符串
var str = "abcdefg";
var substr = "efg";
/*
* 定义判断字符串是否包含指定字符串的函数
* * 第一个参数:要判断的字符串
* * 第二个参数:指定的字符串
*/
function sub(str,substr){
//将判断的字符串定义成String对象
var string = new String(str);
//截取判断的字符串
var result = string.substr(string.indexOf(substr),substr.length);
/*
* 判断截取后的字符串是否为空
* * 为空,说明不包含指定字符串
* * 不为空,说明包含指定字符串
*/
if(result==substr){
return true;
}else{
return false;
}
}
alert(sub(str,substr));
l函数本身也是一个包含了方法和属性的对象。而现在我们要研究的就是函数对象的另一个属性 —— prototype。
l利用原型添加方法与属性l利用自身属性重写原型属性l扩展内建对象
l利用原型添加方法与属性
l下面创建一个新的函数对象,并设置一些属性和方法:
function Hero(name, color){
this.name = name;
this.color = color;
this.whatareyou = function(){
return "I am a " + this.color + " " + this.name;
}
}
var hero = new Hero("javascript","red");
alert(hero.whatareyou()); //output I am a red javascript
l为上面的Hero函数对象增加一些属性和方法:
Hero;
Hero;
Hero.prototype.getInfo = function(){
return "Rating: " + this.rating + " , Price: " + this.price;
}
alert(hero.getInfo()); //output Rating: 3 , Price: 100
l上面的方式,也可以这样去做:
Hero.prototype = {
price ,
rating ,
getInfo : function(){
return "Rating: " + this.rating + " , Price: " + this.price;
}
};
l利用自身属性重写原型属性
l如果对象的自身属性与原型属性同名该怎么办呢?答案是对象自身属性的优先级高于原型属性。
function Hero(){
this.name = "jscript";
}
Hero.prototype.name = "javascript";
var hero = new Hero();
alert(hero.name); //output jscript
delete hero.name;
alert(hero.name); //output javascript
l扩展内建对象
//为原型 Array对象增加一个判断的函数
Array.prototype.inArray = function(color){
, len = this.length; i < len; i++){
if(this[i] === color){
return true;
}
}
return false;
}
//定义一个Array对象
var a = ["red", "green", "blue"];
//测试
alert(a.inArray("red")); //true
alert(a.inArray("yellow")); //false
10.继承
l如果两个类都是同一个实例的类型,那么它们之间存在着某些关系,我们把同一个实例的类型之间的泛化关系称为“继承”。l继承关系至少包含三层含义:l子类的实例可以共享父类的方法。l子类可以覆盖父类的方法或扩展新的方法。l子类和父类都是子类实例的“类型”。l在javascript中,并不支持“继承”。也就是说,javascript中没有继承的语法。从这个意义上来说,javascript并不是直接的面向对象语言。
11.原型链
function A(){
this.name = "a";
this.toString = function(){return this.name};
}
function B(){
this.name = "b";
}
function C(){
this.name = "c";
;
this.getAge = function(){return this.age};
}
B.prototype = new A();
C.prototype = new B();
解释说明:
l将对象直接创建在B对象的prototype属性中,并没有去扩展这些对象的原有原型。l通过new A ( ) 另创建了一个新的实体,然后用它去覆盖该对象的原型。ljavascript是一种完全依靠对象的语言,其中没有类(class)的概念。l因此,需要直接用new A ( ) 创建一个实体,然后才能通过该实体的属性完成相关的继承工作。l完成这样的继承实现之后,对 A ( ) 所进行的任何修改、重写或删除,都不会对 B ( ) 产生影响。
l 只继承于原型:
function A(){}
A.prototype.name = "a";
A.prototype.toString = function(){return this.name};
function B(){}
B.prototype = A.prototype;
B.prototype.name = "b";
function C(){}
C.prototype = B.prototype;
C.prototype.name = "c";
C;
C.prototype.getAge = function(){return this.age};
l 对象之间的继承(扩展内容,可以不会)(浅复制)
//该函数接受一个对象并返回它的副本
function extendCopy(p){
var z = {}; //定义一个空的对象z
for(var i in p){ //var i =0 ; i < p.length ; i++
z[i] = p[i]; //都当做数组处理的话,可以理解
}
//uber属性:将p作为z的父级,将z指向p的原型
z.uber = p;
return z;
}
//定义对象a,但是对象a不是函数对象
var a = {
name : "a",
toStr : function(){return this.name;}
}
//定义对象b,但是对象b不是函数对象
var b = extendCopy(a);
b.name = "b";
b.toStr = function(){return this.uber.toStr() + " , " + this.name;};
//定义对象c,但是对象c不是函数对象
var c = extendCopy(b);
c;
alert(c.toStr()); //output a , b , 18
4.高级js--(面向对象js)_2的更多相关文章
- Vue ---- vue的基本使用 文本/事件/属性指令 补充: js面向对象 js函数
目录 日考题(知识点)
- 5月17日上课笔记-js面向对象
二.js面向对象 js创建对象: var 对象名称 = new Object(); person.name = "小明"; //姓名 person.age = 18; person ...
- 第十五节 JS面向对象实例及高级
实例:面向对象的选项卡 把面向过程的程序,改写成面向对象的形式 原则:不能有函数套函数,但可以有全局变量 过程: onload —— 改写成 构造函数,其中window.onload的功能是在页面加载 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字
缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
- JS面向对象(2)——原型链
原型链用于ECMAScript的继承.其思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.说人话,我们知道,一个构造函数Subtype,其原型对象有一个指向构造函数的指针,这是联系构造函数和 ...
- JS面向对象(1)——构造函数模式和原型模式
1.构造函数模式 构造函数用来创建特定的类型的对象.如下所示: function Person(name,age,job){ this.name=name; this.job=job; this.ag ...
- ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- js 面向对象 动态添加标签
有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
随机推荐
- 关于MySql悲观锁与乐观锁
悲观锁与乐观锁是两种常见的资源并发锁设计思路,也是并发编程中一个非常基础的概念.本文将对这两种常见的锁机制在数据库数据上的实现进行比较系统的介绍. 悲观锁(Pessimistic Lock) 悲观锁的 ...
- “Hello world! ”
12.1第一篇笔记 Python 方向:1.web全栈 2.人工智能 (java基础) 3. 爬虫开发 4.数据分析(金融) 6个月学习:需完成8-10万行代码的目标 下一步学习方向 ...
- erlang 安装
[root@Aliyun software]# rpm -Uvh erlang-solutions-1.0.1.noarch.rpm [root@Aliyun software]# yum -y in ...
- js中获取事件对象的方法小结
原文地址:http://jingyan.baidu.com/article/d8072ac4594d6cec95cefdac.html 事件对象 的获取很简单,很久前我们就知道IE中事件对象是作为全局 ...
- qsort实现结构体数组排序
要注意强制转换 #include <stdio.h> #include <stdlib.h> typedef struct{ int num; char name[20]; f ...
- [UE4]Delay与Retriggerable Delay
一.Delay 在右上角都有一个表盘的图标,表示不是在当帧内执行,而是需要一定时间才能完成的. 鼠标移上去,会有一段文字注释.根据指定的延迟时间执行一个延后的动作.当计时还没有结束的时候,如果再次被调 ...
- [UE4]虚幻4的网络适合开发什么游戏
使用虚幻4开发网络游戏的两种方式 一.虚幻4只做客户端,服务器端独立开发,适用于任何网络游戏 二.使用虚幻4同时开发客户端和服务器(使用虚幻4内置的服务器),适用于一部分网络游戏. 如果使用虚幻4作为 ...
- utf8_unicode_ci、utf8_general_ci区别
摘录一下Mysql 5.1中文手册中关于utf8_unicode_ci与utf8_general_ci的说明: 当前,utf8_unicode_ci校对规则仅部分支持Unicode校对规则算法.一 ...
- TF-IDF算法原理
原文:https://www.cnblogs.com/biyeymyhjob/archive/2012/07/17/2595249.html TF-IDF(term frequency–inverse ...
- 新型DenseBody框架:一张照片获得3D人体信息
来自云从科技和上海交通大学的研究者近期提出一种新型框架 DenseBody,可直接从一张彩色照片中获取 3D 人体姿势和形状.该研究设计了一种高效的 3D 人体姿势和形状表示,无需中间表示和任务,端到 ...