美文网首页
js基础之原型

js基础之原型

作者: wency_8ba7 | 来源:发表于2019-02-19 15:11 被阅读0次

1:创建对象有几种方法

2:原型,构造函数,实例,原型链区别

3:instanceof的原理

4:new运算符

创建对象有几种方法

//字面量

var o1=new Object({name:'01'})        //new Object一个对象

var o2={name:'o1'}

//构造函数

var M=function(name){

this.name=name

}

var 03=M('03')

//Object.creat

var p={name:'p'}

var o4=Object.creat(p)

原型,构造函数,实例,原型链区别

原型规则

1:所有引用类型(数组,对象,函数)都有对象的特性.null除外

var obj={}

obj.a=100

var arr=[]

arr.a=100

function Foo(name,age) {

    this.name=name;

    this.age=age

    console.log(this)

}

2:所有引用类型都有一个隐式属性:__proto__,

属性值是一个普通对象

3:所有函数都有一个prototype显式原型属性,属性值也是一个普通对象

4:所有的引用类型的隐式属性__proto__指向的它构造函数的显式原型属性prototype属性

arr.__proto__===Array.prototype

5:当试图去得到一个对象的属性时,如果这个对象本身没有这个属性,会去它的_proto_去寻找(也就是它的构造函数prototype寻找),而这个它的_proto_又是一个对象,也有__proto__属性,就这样一直往上找,这就是原型链,直到找到Object的原型的时候就到了头,而Object.prototype=null,

1:用new操作的函数

2:函数的prototype属性就是原型对象,只有函数才有prototype, 对象没有,

原型对象通过constructor与函数关联

M是一个函数

M.prototype.constructor===M    结果为true

3:实例的_proto_属性指向的是原型对象

原型链:实例对象往上找到构造这个对象相关联的对象,然后这个对象再往上找,它又有创造它的相关联的对象,以此类推,

一直到对象._proto_中止。

对象的__proto__它的是原型,而原型也是一个对象,也有__proto__属性,原型的__proto__又是原型的原型,就这样可以一直通过__proto__想上,这就是原型链,当向上找找到Object的原型的时候,这条原型链就算到头了。

通过原型链找到原型对象,原型对象上的方法被不同实例共享

instanceof原理(instanceof 检测一个对象A是不是另一个对象B的实例的原理):instanceof是判断实例对象的__proto__和生成该实例的构造函数的prototype是不是引用的同一个地址

__proto__(隐式原型)

prototype(显式原型)

判断引用类型属于哪个构造函数的方法

,即 o3.__proto__===M.prototype

是返回true,否返回false

注意:实例的instanceof在比较的时候,与原型链上想上找的的构造函数相比都是true。

那怎么判断实例是由哪个构造函数生成的呢?这时候就要用到constructor了。

实例的原型的构造函数, obj.__proto__.constructor

new运算符原理

var M=function (name) {

    this.name=name

}

var new2=function (func) {

var o=Object.create(func.prototype) .        //1:生产一个空对象,空对象继承构造函数的原型对象

var k=func.call(o)                  //2:执行构造函数

if (typeof k==='object'){ 。  //3:判断构造函数执行结果是不是对象类型

        return k;

    } else {

        return o

    }

}

1:如何判断一个变量是数组类型

var arr=[]

arr instanceof Array  //ture

2:写一个原型链例子

function People(name) {

    this.name=name

}

People.prototype.age=function (age) {

    var name=this.name

    if (age) {

        console.log('My name is '+name+'I am ' + age +'years old')

        return this

    }else

    {

        return console.log('My name is:'+name)

    }

}

People.prototype.weight=function (weight) {

  if (weight &&weight>100) {

      console.log('I am fat')

      return this    //this用于链式操作

  }else{

    return console.log('I am sin')

  }

}

var lily =new People('lily')

lily.age(15)

lily.weight(45)

lily.age(15).weight(200)

3:new运算符原理

4:construte 和 instanceof的区别和作用

constructor属性来判断一个实例对象是由哪个构造函数构造出来的,也可以说判断它属于哪个类。

function M(name) {

    this.name=name

}

var o=new M('lily')

var p=new M('zhangsan')

console.log(p.constructor)  //M

instanceof 运算符通俗来将就是判断一个实例对象是否由某个构造函数构造而来。

相关文章

  • 发现•分享—2019-01-17

    文章 JS JS 异步编程六种方案 JS基础—原型对象的那些事(一) JS基础—原型对象的那些事(二) CSS 综...

  • js基础之原型

    1:创建对象有几种方法 2:原型,构造函数,实例,原型链区别 3:instanceof的原理 4:new运算符 创...

  • 5-1 从基础知识到JSWebAPI

    回顾js基础知识 JS-web-API 总结 回顾js基础知识 变量类型和计算 原型和原型链 闭包与作用域 异步和...

  • js基础(三)

    js基础 原型链和原型对象 ... ... js没有继承原型对象prototype通常用来添加公共的属性或行为且只...

  • javascript面试准备(一)

    interview js 基础 原型 原型链 作用域 闭包 异步 单线程 js Api dom 操作 ajax 事...

  • JS基础

    JS基础 JS运算 JS代码块 JS对象 原型对象 GC 正则表达式

  • JS基础核心之原型

    构造函数与实例 构造函数与普通函数的唯一区别:调用方式的不同,构造函数用new调用。 new的内部经历了什么? 创...

  • JS基础—原型对象的那些事(一)

    首次发表在:JS基础—原型对象的那些事(一) 谈起js的基础,绕不过去的坎就是:原型链、作用域链、this(em....

  • JavaScript原型链

    js原型链 原型链是JS面向对象的基础非常重要 所有对象只有__proto__属性,而函数具有prototype属...

  • 6.js-Web-API-DOM、BOM

    js基础知识:基于ECMA 262标准(规定基础语法、规则) --变量类型和计算--原型和原型链--闭包和作用域-...

网友评论

      本文标题:js基础之原型

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