美文网首页
js 原型 原型链07-23

js 原型 原型链07-23

作者: 小老虎丶冷心 | 来源:发表于2018-07-29 09:46 被阅读0次

定义

原型是function对象的一个属性它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象。
列:

// Person.prototype     --原型
// Person.prototype={}   是祖先
Person.prototype.name='hehe'; //共有的
function Person(){
  
}
var person=new Person();//hehe
var person1=new Person();//hehe

特点
可以提取共有属性。
列:

// Person.prototype     --原型
// Person.prototype={}   是祖先
Person.prototype.height=1400; 
Person.prototype.lang=4900;
Person.prototype.carName='BMW';
function Person(color,owner){
  this.owner=owner;
  this.color=color;
}
var person=new Person('red','prof.ji'); //Person.carName='BMW'
var person1=new Person('green','laodeng');//Person.carName='BMW'
增
person.prototype.a=b;
查
Person.prototype
删
delete.person.名
改
person.prototype.lastName='james';

如何构成原型链;
原型链上属性的增删改查
绝大多数对象的最终都会继承自Object.prototype
Object.create(原型)

function Person(){

}
Person.prototype
//打印出
Object{};
//里面有的属性
constructor : Person();
__proto__ : Object;

//我们发现在prototype里面,他还有原型,说明原型他还有原型

原型链上的增删改查和原型上的差不多,只能在自己的身上改,没有办法修改父级上面的…但是也不是完全不可以
**
最终原型**

Grand.prototype.name = "shen"
function Grand(){

}
var grand = new Grand;

Father.prototype = grand;
function Father(){

}
var father = new Father;

son.prototype = father;
function son(){

}
var son = new Son();
son.name//打印出shen
//依次排查
Grand.prototype.__proto__ = object.prototype
//object.prototype最终原型

Object.create : 就是一个新的对象可以继承一个对象的属性,并且可以自行添加属性

//var Obj = Object.create(原型)
var Obj = {
    name = "sunny",
    age : 123
};
var obj1 = Object.create(obj);

obj1.name//打印出sunny

添加属性

var parents = {
     name : "wu",
     bron : "2013",
     from : "China"
 }
 var child = Object.create(
     parents,
     {
         title : {
             value : "技术分享",

         },
         year : {
             value : "18",

         }
     }
 );

特殊情况

var a = object.create(null)
//这种情况他就没有原型

call\apply\bind
JavaScript 提供了call、apply、bind这三个方法,来切换/固定this的指向。
作用,改变this指向;
区别,后面传的参数不同

function Person(name,age){
    //this == obj;
    this.name = name;
    this.age = age;
}

var person = new Person("shen" 150);
var obj = {};
Person.call(obj,"wu",200);

函数实例的call方法,可以指定函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true

上面代码中,全局环境运行函数f时,this指向全局环境(浏览器为window对象);call方法可以改变this的指向,指定this指向对象obj,然后在对象obj的作用域中运行函数f

var n = 123;
var obj = { n: 456 };

funcion a() {
  console.log(this.n);
}

a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456

上面代码中,a函数中的this关键字,如果指向全局对象,返回结果为123。如果使用call方法将this关键字指向obj对象,返回结果为456。可以看到,如果call方法没有参数,或者参数为null或undefined,则等同于指向全局对象
Function.prototype.apply()
apply方法的作用与call方法类似,也是改变this指向,然后再调用该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数,使用格式如下。

func.apply(thisValue, [arg1, arg2, ...])

apply方法的第一个参数也是this所要指向的那个对象,如果设为null或undefined,则等同于指定全局对象。第二个参数则是一个数组,该数组的所有成员依次作为参数,传入原函数。原函数的参数,在call方法中必须一个个添加,但是在apply方法中,必须以数组形式添加

function f(x, y){
  console.log(x + y);
}

f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2

上面代码中,f函数本来接受两个参数,使用apply方法以后,就变成可以接受一个数组作为参数
Function.prototype.bind()
bind方法用于将函数体内的this绑定到某个对象,然后返回一个新函数

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.

上面代码中,我们将d.getTime方法赋给变量print,然后调用print就报错了。这是因为getTime方法内部的this,绑定Date对象的实例,赋给变量print以后,内部的this已经不指向Date对象的实例了
bind方法可以解决这个问题。

var print = d.getTime.bind(d);
print() // 1481869925657

上面代码中,bind方法将getTime方法内部的this绑定到d对象,这时就可以安全地将这个方法赋值给其他变量了。
bind方法的参数就是所要绑定this的对象,下面是一个更清晰的例子。

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var func = counter.inc.bind(counter);
func();

上面代码中,counter.inc方法被赋值给变量func。这时必须用bind方法将inc内部的this,绑定到counter,否则就会出错

相关文章

  • js 原型 原型链07-23

    定义 原型是function对象的一个属性它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • JS的__proto__和prototype

    最近在回顾JS的原型和原型链的知识,熟悉JS的同学都知道JS的继承是靠原型链实现的,那跟原型链相关的属性__pro...

  • 关于JS中的原型和原型链

    目录 关于js 对象和原型 原型链 基于原型链的继承 参考资料ECMAScript 6 入门JavaScript原...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

  • 从实现角度分析js原型链

    从实现角度分析js原型链 欢迎来我的博客阅读:《从实现角度分析js原型链》 网上介绍原型链的优质文章已经有很多了,...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

  • 2022前端高频面试题

    JS相关 1.原型和原型链是什么 原型和原型链都是来源于对象而服务于对象的概念js中引用类型都是对象,对象就是属性...

网友评论

      本文标题:js 原型 原型链07-23

      本文链接:https://www.haomeiwen.com/subject/oqnvmftx.html