JS原型链

5 篇文章 0 订阅

1.创建对象几种方法

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>原型链</title>

</head>

<body>

 

<script type="text/javascript">

// 第一种方式:字面量

var o1 = {name: 'o1'};

var o2 = new Object({name: 'o2'});

// 第二种方式:构造函数

var M = function (name) { this.name = name; };

var o3 = new M('o3');

// 第三种方式:Object.create

var p = {name: 'p'};

var o4 = Object.create(p);

 

M.prototype.say = function () {

console.log('say hi');

};

var o5 = new M('o5');

 

//new 运算符的工作原理

var new2 = function (func) {

//生成一个新对象 继承自构造函数的原型对象

var o = Object.create(func.prototype);

// 执行构造函数 转移上下文

var k = func.call(o);

if (typeof k === 'object') {

return k;

} else {

return o;

}

};

</script>

</body>

</html>

var o4 = Object.create(p) 是通过原型链来链接的 o4.__proto__ === p ===》true

o4其实是一个空对象,并没有name这个属性,他是通过原型链来链接到p 找到name属性,所以和上面三个不同

2.原型,构造函数,实例,原型链

对象就是实例 函数 实例都是对象,对象就有__proto__属性 获取它的原型对象 函数的原型对象是function的原型 也就是说 M 是function的实例

M.__proto__.constructor===Function ===>true

M.__proto__===Function.prototype ===>true

new 运算符操作的函数 就是构造函数 构造函数可以可以根据prototype 获取它的实例的原型对象

o3.__proto__===M.prototype ==>true

任何函数都可以是构造函数,只要用 new 去操作它 ,没有就是普通函数 函数才有prototype 对象没有

原型对象可以通过constructor获取对应的构造函数

M.prototype.constructor===M ==>true

o3 instanceof M ==>true

o3.__proto__.constructor===M ==>true

Object 既是一个对象 也是一个构造函数 Object.prototype 获得原型链的顶端

o3.__proto__.__proto__===Object.prototype ===》true

原型链的作用 ,可以给共同原型链对象添加方法,其他对象都可以获得这个方法

M.prototype.say = function () {

console.log('say hi');

};

o3.say() say hi

o5.say() say hi

o3对象会通过 .__proto__.__proto__去找它的原型链对象是否有这个方法如果有则执行 都没有就报错

3.instanceof的原理

实例 instanceof 构造函数 就是判断实例.__proto__ === 构造函数.prototype 两边得到都是原型对象 看它是否是同一个引用

o3 instanceof Object ==>true

o3.__proto__ ===M.prototype ==>true

M.prototype.__proto__ ===Object.prototype ==>true

o3.__proto__.__proto__ ===Object.prototype ==>true

4.new运算符

//new 运算符的工作原理

var new2 = function (func) {

//生成一个新对象 继承自构造函数的原型对象

var o = Object.create(func.prototype);

// 执行构造函数 转移上下文

var k = func.call(o);

//判断构造函数返回的是不是一个对象

if (typeof k === 'object') {

return k;

} else {

return o;

}

验证 new2 是否和 new 一个效果

 

o6 = new2(M);

M {name: undefined}

o6.__proto__===M.prototype

true

o6.__proto__.constructor===M

true

o6 instanceof M

true

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值