浅谈二种常用的JS类定义方法,JavaScript承接定义与用法实行深入分析

正文实例深入分析了JS类的定义与运用办法。分享给大家供大家参照他事他说加以考察,具体如下:

本文实例陈说了javascript基于原型链的接续及call和apply函数用法。分享给大家供大家参照他事他说加以考察,具体如下:

// 方法1 对象直接量

本文实例陈说了JavaScript继承定义与用法。分享给大家供我们参谋,具体如下:

js能够定义自身的类

1.
连任是面向对象编制程序语言的贰个最主要特色,比方Java中,通过extend能够兑现多再而三,但是JavaScript中的承接格局跟JAVA中有非常大的差异,JS中通过原型链的法子贯彻持续。

var obj1 = {
 v1 : "",
 get_v1 : function() {
  return this.v1;
 },
 set_v1 : function(v) {
  this.v1 = v;
 }
};

javascript 继承 , 老生长谈的事物, 大家应该都很通晓了,
平时专门的学业基本不会平昔运用, 最近不忙, 所以补习了下有关基础知识
,自个儿动手实施, 加深理解:

浅谈二种常用的JS类定义方法,JavaScript承接定义与用法实行深入分析。很风趣

(1)对象的原型:因为JS中,函数也是指标,由此我们先从指标出发。什么是目的的原型,原型的概念为:

// 方法2 定义函数对象

基类定义如下:

<script type="text/javascript">
var Anim = function() {
  alert('nihao');
};
Anim.prototype.start = function() {
  alert('start');
};
Anim.prototype.stop = function() {
   alert('stop');
};
var myAnim = new Anim();
myAnim.start();
myAnim.stop();
</script>

怀有通过对象直接量创设的靶子都有着同二个函数原型,并且能够通过Object.prototype得到对原型对象的援引,通过机要字new和构造函数调用创制的目的的原型正是构造函数的prototype属性的值。

var Obj = function() {
 var v1 = "";
 this.get_v1 = function() {
  return this.v1;
 };
 this.set_v1 = function(v) {
  this.v1 = v;
 }
};
// base class
function Animal(t)
{
   if(typeof t==='string')
    this.type=t;
   else
   {
    if(t)
      this.type=t.toString();
    else
      this.type='Animal'
   }
   this.speak=function(str)
   {
    if(str)
      console.log(this.type+' said '+str);
    else
      throw "please specify what you want to say!";
   }
}

Anim正是一个类,早先化的时候会弹出nihao。

注:未有原型的对象非常的少,Object.prototype对象是不曾原型的。

// 方法3 原型承继

  1. 原型承袭 (javascript 类库自己基于原型承继)

它有八个艺术,二个是start方法,三个是stop方法。

(2)创立对象的原型

var Obj3 = new Function();
Obj3.prototype = {
 v1 : "",
 get_v1 : function() {
  return this.v1;
 },
 set_v1 : function(v) {
  this.v1 = v;
 }
};

String, Number , Boolean 那三大原始类型
大家能够很直接的经过prototype
检查到她们雄起雌伏自Object.

选用的时候一贯用’点’来调用。

举个例子说此处有一个Student对象和八个Person对象,其中,Student.prototype指向Person.prototype

// 方法4 工厂格局

Date, RegExp ,Array
那三应该是直接接轨了Object,
他们的prototype属性很独特 :

<script type="text/javascript">
var Anim = function() {
  alert('nihao');
};
Anim.prototype = {
 start: function() {
  alert('start');
 },
 stop: function() {
  alert('stop');
 }
};
var myAnim = new Anim();
myAnim.start();
myAnim.stop();
</script>

对于创立对象完全两样的两种办法:

function loadObj() {
 var tmp = new Object();
 tmp.v1 = "";
 tmp.get_v1 = function() {
  return tmp.v1;
 };
 tmp.set_v1 = function(v) {
  tmp.v1 = v;
 };
 return tmp;
}

obj1.set_v1('hello1');
alert(obj1.get_v1());

var obj2 = new Obj();
obj2.set_v1('hello2');
alert(obj2.get_v1());

var obj3 = new Obj();
obj3.set_v1('hello3');
alert(obj3.get_v1());

var obj4 = loadObj();
obj4.set_v1('hello4');
alert(obj4.get_v1());

alert(obj1);
alert(obj2);
alert(obj3);
alert(obj4);
Date.prototype =Invalid Date
RegExp.prototype=/(?:)/
Array.prototype=[]

另一种概念格局,同地方一样的功力。

i)Student.prototype=Person.prototype

如上那篇浅谈三种常用的JS类定义方法正是作者分享给大家的全部内容了,希望能给大家二个参谋,也期望我们多多辅助脚本之家。

原型承继代码如下: (能够看到Mokey 原型链上的Animal和Object)

第三种,

这种格局,创造Student的prototype对象,假如改换Student.prototype的值的时候,Person.prototype也会同有的时候间改换,为了防止这种场馆,大家应使用别的方法;

你也许感兴趣的小说:

  • js类定义函数时用prototype与不用的区分示例介绍
  • Javascript类定义语法,私有成员、受保证成员、静态成员等引见
  • javascript 类定义的4种方法
  • 一个轻松易行的javascript类定义例子
  • JS类定义原型方法的二种实现的界别商量相当多
  • JS中类或对象的概念表达
  • JavaScript定义类或函数的两种方式小结
  • JS类中定义原型方法的二种完结的分别
  • 有关js类的定义
  • JS类的概念与运用格局深刻搜求
// Monkey : Animal 
function Monkey(name,age)
{
   this.name=name;
   this.age=age;
}
Monkey.prototype=new Animal('Monkey');
// Example 01
var m=new Monkey('codeMonkey',10);
    /*
    Monkey:
    age: 10
    name: "codeMonkey"
      __proto__: Animal
      speak: function (str)
      type: "Monkey"
        __proto__: Animal
        constructor: function Animal(t)
          __proto__: Object 
*/
console.log(m.type); // Monkey
console.log(m.name); // codeMonkey
console.log(m.age); // 10
m.speak('hello world') // Monkey said hello world 
<script type="text/javascript">
var Anim = function() {
  alert('nihao');
};
Function.prototype.method = function(name, fn) { // 这个很有作用
 this.prototype[name] = fn;
};
Anim.method('start', function() {
 alert('start');
});
Anim.method('stop', function() {
 alert('stop');
});
var myAnim = new Anim();
myAnim.start();
myAnim.stop();
</script>

ii)Student.prototype=Object.create(Person.prototype)

  1. 调用父类构造函数 ( 通过传递子类的this指针 ,
    将原来是父类的当众成员直接抬高到了子类中,从子类原型链中无法看到一而再关系)

越来越多关于JavaScript相关内容可查看本站专项论题:《javascript面向对象入门教程》、《JavaScript中json操作手艺总计》、《JavaScript切换特效与本领总括》、《JavaScript查找算法手艺总括》、《JavaScript动画特效与手艺汇总》、《JavaScript错误与调治技术总计》、《JavaScript数据结构与算法技术计算》、《JavaScript遍历算法与技巧计算》及《JavaScript数学生运动算用法计算》

这种办法,创制的Student的Prototype对象,在转移Student.prototype的本性或然措施时,不会同期去改动Person.prototype的习性。

// Human:Animal 
function Human(id,name)
{
    // call base class's constuctor function
   Animal.call(this,'Human');
   this.id=id;
   this.name=name;
}
var h=new Human(1,'leon');
/*
id: 1
name: "leon"
speak: function (str)
type: "Human"
    __proto__: Human
    constructor: function Human(id,name)
      __proto__: Object
*/
h.speak('hello world'); // Human said hello world 
console.log(h.type); // Human

意在本文所述对大家JavaScript程序设计具备支持。

(3)基于承继的赋值操作

更加多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《javascript面向对象入门教程》、《JavaScript错误与调整技艺计算》、《JavaScript数据结构与算法本领总计》、《JavaScript遍历算法与手艺总计》及《JavaScript数学生运动算用法总计》

您或许感兴趣的篇章:

  • 浅谈两种常用的JS类定义方法
  • js类定义函数时用prototype与不用的区分示例介绍
  • Javascript类定义语法,私有成员、受保证成员、静态成员等介绍
  • javascript 类定义的4种方法
  • 一个简约的javascript类定义例子
  • JS类定义原型方法的三种完结的区分商量相当多
  • JS中类或对象的概念表达
  • JavaScript定义类或函数的二种办法小结
  • JS类中定义原型方法的二种达成的界别
  • 至于js类的定义

例1:

企望本文所述对大家JavaScript程序设计有所帮忙。

var o={
  x:1
}
o.x=2;
alert(o.x);//输出o.x=2

您只怕感兴趣的小说:

  • JavaScript传承与多接二连三实例分析
  • JavaScript落到实处多种承接的法门深入分析
  • 浓密浅析javascript承袭体系
  • JS承继与闭包及JS完毕延续的三种办法
  • js中继承的二种用法总结(apply,call,prototype)
  • JavaScript是如何兑现一而再的(七种格局)
  • 深刻通晓javascript中的prototype与持续
  • Javascript基于对象三大特征(封装性、承继性、多态性)
  • javascript的函数、创造对象、封装、属性和艺术、传承
  • Javascript 承袭机制的完成
  • JavaScript的原型承袭详解

例2:

var o={
  x:1
}
var osp=Object.create(o);
alert(osp.x);//输出1
osp.x=2;
alert(osp.x);//输出2

i)从上面的七个例子中,大家大要能够看出来,就算指标osp上有x属性,那么不论是取值,照旧赋值,都以基于osp对象上的直白属性x,假使osp对象上尚未x属性,那么会沿着prototype原型链查找,直到找到贰个包涵x属性的prototype属性链上的指标,假设osp对象具有prototype原型链上都尚未包括x属性,那么重临underfined。

ii)o对象属性的赋值,被视为在osp对象上间接举办,不会潜移暗化原型链上的习性。比如上例中的osp.x=2的赋值是在osp对象上,不会影响osp的原型对象o。

  1. 举一些对象中持续的事例

美高梅开户网址 ,(1)大家学过能够用instanceof来进行项目判别,instanceof方法自然正是依据原型链的。

比如例3:

[1,2] instanceof Array    //返回true
[1,2] instanceof Object   //返回true

以此例子表明Array.prototype也是连续于对象而来。

(2)函数中的组合承继难点

function student(name,age){
  this.name=name;
  this.age=age;
}
student.prototype.age=function(){
  return this.age;
}
function beststudent(name,age){
  student.call(this,age);
  return this.name;
}
beststudent.prototype=new student();
  alert(beststudent("yu",2))//输出2
}
  1. call函数和apply函数

call函数和apply函数用于转移函数中this的针对性,用于对象A调用对象B的章程,call函数和apply函数的区分在于传参的门类区别,apply(x,y),x表示的是实行函数的目的,而y则意味着实行函数所急需调用的参数,是四个数组,况兼能够传参为argument数组,而call(x,y)中的y之后的变量则是由此可见的变量;

更加多关于JavaScript相关内容可查看本站专项论题:《javascript面向对象入门教程》、《JavaScript中json操作本事计算》、《JavaScript切换特效与技巧总计》、《JavaScript查找算法技艺计算》、《JavaScript错误与调治本事计算》、《JavaScript数据结构与算法技能计算》、《JavaScript遍历算法与本事总结》及《JavaScript数学生运动算用法计算》

企望本文所述对大家JavaScript程序设计有着帮助。

你可能感兴趣的篇章:

  • [js高手之路]图解javascript的原型(prototype)对象,原型链实例
  • [js高手之路]从原型链伊始都体育场所解承接到组合承袭的产生详解
  • JavaScript使用原型和原型链完成指标承袭的艺术详解
  • JS原型与原型链的深深驾驭
  • js 原型对象和原型链精晓
  • 深远通晓JS承接和原型链的主题材料
  • javascript中目的的定义、使用以及对象和原型链操作小结
  • 理解JavaScript原型链
  • 分析javascript原型及原型链

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图