小汤学编程之JavaScript学习day04——自定义对象、原型与原型链、BOM

一、自定义对象

1.对象的定义     2.对象的使用

二、原型与原型链

1.JS的继承结构图     2.关键点

三、BOM

1.window对象     2.document对象     3.location对象

---

一、自定义对象

1.对象的定义

• 方式一：字面量

// 方式一：字面量 
var user1 = {
	name: "张三",
	age: 17,
	sleep: function () {
		console.log("好好学习，天天睡觉。")
	}
}

• 方式二：Object

// 方式二：Object
var user2 = new Object();
user2.name = "李四";
user2.age = 11;
user2.study = function () {
console.log("我爱学习，你爱吗？")
}

• 方式三：工厂模式

// 方式三：工厂模式
function createUser(name, age) {
	var user3 = new Object();
	user3.name = name;
	user3.age = age;
	user3.run = function () {
		console.log("跑五公里")
	}
	return user3;
};
var user3 = createUser("王麻子", 12);

• 方式四：构造方法

// 方式四：构造方法 （构造方式首字母大写以区别其他方法）
function User(name, age) {
	this.name = name;
	this.age = age;
	this.eat = function () {
		console.log("三口一头猪")
	}
}
var user4 = new User("赵六", 33);

• 方式五：Object.create

// 方式五：Object.create (类似Java中的clone)
var user5 = Object.create(user1);

2.对象的使用

• 属性的访问跟赋值

person.name;// 访问方式一
person["name"];// 访问方式二
person.name = "seven"；//赋值方式一
person["name"] = "seven"；// 赋值方式二

• 动态的删除属性

delete person.name ;// 动态的删除person对象的name属性

• 动态的添加属性

person.hello = "hello";// 直接给新的属性赋值即可
person.eat =function(){console.log("吃");} // 函数也一样。

• 判断属性是否在此对象中

"name" in person;  // 判断name属性是否存在person对象或者父类对象中。
"sleep" in person; // 判断sleep函数是否存在person对象或者父类对象中。
person.hasOwnProperty("name");// 判断name属性是否存在person对象中，不包括父类的
person.hasOwnProperty("sleep");// 判断sleep函数是否存在person对象中，不包括父类的

二、原型与原型链

1.JS的继承结构图

2.关键点

• JS在创建对象的时候都会创建对应类型的原型。
• 给类添加属性和方法时，可以添加在对象中或者原型中，区别是对象中的属性和方法时独立的，原型中的是所有对象共享的。
• 当访问对象的属性和方法时，程序会先去对象中找，找不到再去其原型中找，找不到再去父原型里找。
• 每个JS对象都有一个 __proto__ 属性，指向该对象的原型；原型也有一个该属性，指向其父类的原型（默认指向Object的原型），从而实现继承。

三、BOM

浏览器对象模型 (Browser Object Model） 使 JavaScript 有能力与浏览器"对话"。
BOM是由window对象、document对象和location对象三者组成。

1.window对象

window 对象是BOM中所有对象的核心，除了是BOM中所有对象的父对象外，还包含一些窗口控制函数。

所有浏览器都支持 window 对象。它表示浏览器窗口。其它的BOM对象都是window对象的子对象。

// 定义的全局变量都默认是window属性
var a = "hello";
// 定义的全局函数都默认是window函数
function study(){
    console.log("好好学习，天天向上。");
}

// window可省略
console.log(a); //　hello 
console.log(window.a);//　hello 
window.study(); 

全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

常用方法：

(1)窗口尺寸

方法	说明
.innerHeight	浏览器窗口的内部高度
.innerWidth	浏览器窗口的内部宽度
.outerHeight	浏览器窗口的外部高度
.outerWidth	浏览器窗口的外部宽度

(2)系统对话框

方法	说明
alert()	确定提示框，只有一个确定按钮，无返回值
confirm()	选择提示框，有确认跟取消按钮，返回true/false
prompt()	输入提示框，可以输入值，有确认跟取消按钮，返回输入的值或null

(3)定时器

方法	说明
setIntetval()	按照执行的周期（单位为毫秒） 调用函数或计算表达式
setTimeout()	在指定的毫秒数后调用函数或计算表达式
clearIntervar()	取消由 setInterval() 方法生成的定时器（参数为定时器名）
clearTimeout()	取消由 setTimeout() 方法生成的定时器

(4)窗口移动

由于安全性的考虑，Chrome等浏览器把这个功能屏蔽了。

方法	说明
.moveBy()	相对窗口的当前坐标移动指定的像素
.moveTo()	将窗口的左上角移动到指定坐标
.resizeTo( , )	将窗口大小改成指定大小

(5)打开窗口

方法	说明
.open(URL, name, features, replace)	打开一个新窗口
.close()	关闭窗口对象

URL：可选字符串，声明在新窗口中显示网页文档的URL。若省略或为空，则新窗口不会选择任何文档。
name：可选字符串，声明新窗口的名称。
features：可选字符串，声明了新窗口要显示的浏览器特征。若省略则新窗口将为标准特征。
replace：可选布尔值，规定新窗口是在浏览历史中创建新条目，还是替换当前条目。

2.document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

(1)对象属性

属性	说明
.cookie	设置或返回与当前文档有关的所有cookie
.domain	返回当前文档的域名
.lastModified	返回文档最后被修改的时间
.referrer	返回载入当前文档的来源文档的URL
.title	返回当前文档的标题
.URL	返回当前文档的URL

.referrer属性，如果当前文档不是通过超链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。

(2)文档写入

方法	说明
.open()	打开一个流，来收集来自任何 document.write() 或 .writeln() 方法的输出
.write()	向文档写HTML表达式或JavaScript代码
.writeln()	等同于 .write() 方法，不同的是每个表达式后写一个转行符
.close()	关闭流

(3)文档操作

(文档操作详见本系列下篇博客笔记)

3.location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
这种方法既可以用于具有onclick事件的标签，也可以用于满足某些条件进行跳转，特点是方便且灵活。

(1)对象属性

属性	说明
.host	设置或返回主机名和当前URL的端口号
.protocol	设置或返回当前URL的协议
.hostname	设置或返回当前URL的主机名
.port	设置或返回当前URL的端口号
.href	设置或返回完整的URL
.pathname	设置或返回当前URL的路径部分
.search	设置或返回URL的从问号开始的部分

.href 属性可以用来设置页面的跳转。
如：location.href = "https://www.baidu.com/";

(2)地址操作

方法	说明
.assign("")	打开新的页面，会在History对象中生成一个新的记录
.replace("")	打开新的页面，不会在History对象中生成新的记录
.reload()	刷新当前页面的内容