秋招复习计划-JavaScript知识点5

  |  

前言

new和Object.create的区别,DOM的location对象


32



new和Object.create()的区别

Object.create(proto, propertiesObject)

Object.create()的定义是使用指定的原型proto对象及其本身的属性propertiesObject去创建一个新的对象(mdn的定义)

proto

是必填参数,为新创建的对象指定原型(及新对象的__proto__属性的指向),需要注意的是proto参数可以为null,这是新创建的对象没有原型,也无法继承Object.prototype上的方法

空对象

propertiesObject

参数可选,参数为一个对象,为新对象添加新属性及其描述器,构成形式与Object.defineProperties()方法的第二个参数相同。添加的属性为新对象自身具有的属性,并不是添加到新对象的原型中

propertiesObject

Object.create()的具体步骤

  • 创建一个新对象
  • 继承指定父类对象
  • 为新对象扩展新属性

手写实现Object.create()

利用的就是原型式的继承

1
2
3
4
5
6
7
8
9
Object.myCreate = function(obj, properties) {
let F = function() {}
F.prototype = obj;
let result = new F();
if(properties) {
Object.defineProperties(result, properties);
}
return result;
}

myCreate

new Object()

new不想多讲了,已经写过无数遍了

DOM的location对象

location的介绍

location指示当前窗口的url位置。Document和window对象中都拥有一个location属性对象。

想要获得当前文档完整的URL,可以使用一下方法:

  • document.location
  • document.location.href
  • document.URL
  • document.location.toString()

属性

location.href

当前文档完整的url,如果改变,文档就会被导航到另一个页面

1
document.location.href = "http://www.baidu.com"

location.protocol

当前url使用的协议,包括结尾的冒号

protocol

location.host

包括当前主机的信息,主机名和端口号

host

如果服务器使用的是Web服务的默认80端口,则不返回端口号

location.hostname

返回当前url的主机名

location.port

返回url的端口信息。没有写端口信息的url使用的是与默认协议相关的默认端口

location.pathname

返回url的路径字符串

pathname

字符串包括最前面的/

location.search

返回get请求的查询字符串及?后的内容

location.hash
返回url中代表页面某个区域带有#的字符串

location.username

设置或返回url中域名前面的用户名

location.password

设置或返回url中的密码部分

location.orgin

返回url中完整的协议和主机地址部分,包括端口

完整示例

示例

方法

location.assign()

是浏览器加载并展示url所指定的文档

location.reload()
该方法用于重新加载当前页面,可以接受一个Boolean类型的参数,为true是重载将强制从服务器重新获取,为false时从缓存中重载。默认为false

location.replace()

提供一个url用来替换当前页面,他与assign的区别是,assign是可追溯的,但是replace跳转后页面不会保留在记录中,所以无法使用返回按钮来返回到前页面

location.toString()

获得当前页面的字符串输出

文章目录
  1. 1. new和Object.create()的区别
    1. 1.1. Object.create(proto, propertiesObject)
    2. 1.2. new Object()
  2. 2. DOM的location对象
    1. 2.1. location的介绍
    2. 2.2. 属性
    3. 2.3. 完整示例
    4. 2.4. 方法
|